Use bootstrap .modal() on dynamically loaded content
15,999
Solution 1
After a lot of help from @Badaboooooom and @ic3b3rg, turns out I had to exchange the .modal({... remote : '...', ..})
for a data-remote="..."
tag in the script markup, and also had to remove the .fade
from #lngModal
.
var languageModal = '<div id="lngModal" class="modal hide" data-remote="/language.html">'+
//other stuff
$('#lngModal').modal('show',{
backdrop: true,
keyboard: false,
});
Solution 2
Your code does work. Are you loading the bootstrap css?
I can't post this w/o some code:
' Nothing, really
Solution 3
try this:
$('body').append(languageModal,function(){
console.log('modal appended');
$('#lngModal').modal({
backdrop : 'static',
keyboard : false,
remote : '/language.html',
});
console.log('modal init');
});
instead of
$('body').append(languageModal);
$('#lngModal').modal({
backdrop : 'static',
keyboard : false,
remote : '/language.html',
});
Comments
-
SeinopSys almost 2 years
I have my code here, that inserts a 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 call
.modal()
on it, it won't load, only the black overlay appears:$('#lngModal').modal({ backdrop : 'static', keyboard : false, remote : '/language.html', });
I tried with
.on('modal',{...})
, but that didn't work.