javascript - Use bootstrap .modal() on dynamically loaded content - Stack Overflow

admin管理员组

文章数量:1353326

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.

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.

• javascript
• jquery
• twitter-bootstrap
• modal-dialog

Share Improve this question Follow edited Jan 1, 2013 at 20:08 SeinopSys asked Jan 1, 2013 at 16:57 SeinopSysSeinopSys 8,9361010 gold badges6565 silver badges114114 bronze badges 2

• sure you loaded the modal.js ? also, are you trying opening automatically the modal or opening that on btn click or somenthing like this? – Filippo oretti Commented Jan 1, 2013 at 20:39
• @Badaboooooom Allow me to share the js file: dropbox./s/osgkfcmqtm4p42v/init.js – SeinopSys Commented Jan 1, 2013 at 20:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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',
            }); 

Your code does work. Are you loading the bootstrap css?

http://jsfiddle/xjCAn/

I can't post this w/o some code:

' Nothing, really

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,
}); 

I had that also once, but only when I wanted to increase to modal size by using the following css:

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

I fixed it by setting max-height on the modal-body:

var modalBody = modal.children('.modal-body');

modalBody.css({
   maxHeight: '800px'
});

Did you change the modal css?

本文标签： javascriptUse bootstrap modal() on dynamically loaded contentStack Overflow