twitter-bootstrap 在动态加载的内容上使用 bootstrap .modal()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14112311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use bootstrap .modal() on dynamically loaded content
提问by SeinopSys
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:
但是，当我调用.modal()它时，它不会加载，只会出现黑色覆盖：
$('#lngModal').modal({
backdrop : 'static',
keyboard : false,
remote : '/language.html',
});
I tried with .on('modal',{...}), but that didn't work.
我尝试过.on('modal',{...})，但是没有用。
采纳答案by SeinopSys
After a lot of help from @Badaboooooomand @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 .fadefrom #lngModal.
经过@ Badaboooooom和@ ic3b3rg的大量帮助，结果我不得不在脚本标记中交换.modal({... remote : '...', ..})for adata-remote="..."标记，并且还必须删除.fadefrom #lngModal。
var languageModal = '<div id="lngModal" class="modal hide" data-remote="/language.html">'+
//other stuff
$('#lngModal').modal('show',{
backdrop: true,
keyboard: false,
});
回答by itsme
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',
});
回答by ic3b3rg
Your code does work. Are you loading the bootstrap css?
您的代码确实有效。您是否正在加载引导程序 css？
I can't post this w/o some code:
我无法在没有代码的情况下发布此内容：
' Nothing, really
回答by asgoth
I had that also once, but only when I wanted to increase to modal size by using the following css:
我也有过一次，但仅当我想通过使用以下 css 增加到模态大小时：
var modal = $('#lngModal');
modal.css({
width: '60%',
left: '20%',
margin: 'auto auto auto auto',
top: '10%'
});
I fixed it by setting max-heighton the modal-body:
我通过设置max-height来修复它modal-body：
var modalBody = modal.children('.modal-body');
modalBody.css({
maxHeight: '800px'
});
Did you change the modal css?
你改变了模态css吗？
