Geek Answers Handbook

Use bootstrap.modal () for dynamically loaded content

I have my code here that inserts predefined modal markup at the end of the body:

var languageModal = '<div id="lngModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="lngModalLabel" aria-hidden="true">'+ ' <div class="modal-body"></div>'+ ' <div class="modal-footer">'+ ' <form class="inline" id="lngModalForm">'+ ' <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">'+ ' <span lang="hu"'+((langAfterInit == 'hu') ? '' : ' style="display:none;"')+'>Bezárás</span>'+ ' <span lang="en"'+((langAfterInit != 'hu') ? ' style="display:none;"' : '')+'>Close</span>'+ ' </button>'+ ' </form>'+ ' </div>'+ '</div>'; $('body').append(languageModal);

But, when I find .modal() on it, it will not load, only a black overlay appears:

 $('#lngModal').modal({ backdrop : 'static', keyboard : false, remote : '/language.html', });

I tried with .on('modal',{...}) , but that didn't work.

+4
source share
4 answers

After much help from @ Badaboooooom and @ ic3b3rg , I had to exchange .modal({... remote : '...', ..}) for the data-remote="..." tag in the markup script, and also had to remove .fade from #lngModal .

 var languageModal = '<div id="lngModal" class="modal hide" data-remote="/language.html">'+ //other stuff $('#lngModal').modal('show',{ backdrop: true, keyboard: false, });
+1
source

try the following:

  $('body').append(languageModal,function(){ console.log('modal appended'); $('#lngModal').modal({ backdrop : 'static', keyboard : false, remote : '/language.html', }); console.log('modal init'); });

instead

 $('body').append(languageModal); $('#lngModal').modal({ backdrop : 'static', keyboard : false, remote : '/language.html', });
+1
source

Your code really works. Are you downloading bootstrap css?

http://jsfiddle.net/xjCAn/

I can not post this without any code:

 ' Nothing, really
+1
source

I had this one time too, but only when I wanted to increase the size of the modality using the following css:

 var modal = $('#lngModal'); modal.css({ width: '60%', left: '20%', margin: 'auto auto auto auto', top: '10%' });

I installed it by setting max-height to modal-body :

 var modalBody = modal.children('.modal-body'); modalBody.css({ maxHeight: '800px' });

Have you changed modal css?

0
source

More articles:


All Articles