在动态加载的内容上使用 bootstrap .modal()

Question

我在这里有我的代码，它在正文的末尾插入了一个预定义的模式标记：

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

但是，当我在上面调用.modal() 时，它不会加载，只出现黑色覆盖：

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

我尝试使用.on('modal',{...})，但没有成功。

Answer 1

我也有过一次，但只有当我想通过使用以下 css 来增加模态大小时：

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

我通过在modal-body 上设置max-height 来修复它：

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

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

你改变了模态css吗？

Answer 2

试试这个：

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

console.log('modal init');
    });

而不是

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

Answer 3

您的代码确实有效。你在加载引导 css 吗？

http://jsfiddle.net/xjCAn/

我无法在没有代码的情况下发布此内容：

' Nothing, really

Answer 4

在@Badaboooooom 和@ic3b3rg 的大量帮助下，我不得不在脚本标记中将.modal({... remote : '...', ..}) 换成data-remote="..." 标签，并且还必须从#lngModal 中删除.fade。

var languageModal =  '<div id="lngModal" class="modal hide"  data-remote="/language.html">'+
//other stuff

$('#lngModal').modal('show',{
    backdrop: true,
    keyboard: false,
});