CSS 如何创建默认情况下不会消失和加载的 Bootstrap 静态模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19245276/
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
how to create Bootstrap static modal that does NOT dissapear and loads by default
提问by jojojohn
Trying to create a view in codeignitor for a log in page that permanently displays a Bootstrap Modal. I am able to get the modal pop up window by adding the button, but I do not know how to get the modal to display by default when the page loads.
尝试在 codeignitor 中为永久显示 Bootstrap Modal 的登录页面创建视图。我可以通过添加按钮来获得模态弹出窗口，但我不知道如何在页面加载时默认显示模态。
I copied and pasted the following from the docs but nothing shows on the page, it only shows up in the source.
我从文档中复制并粘贴了以下内容，但页面上没有显示任何内容，它只显示在源代码中。
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
回答by devo
You can create this by removing fadeand add showclass to modal.
您可以通过删除类fade并将其添加show到模态来创建它。
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Check the Demo
检查演示
回答by Bass Jobsen
Open the modal by javascript on document ready by $('#myModal').modal('show');
在文档准备好时通过javascript打开模态 $('#myModal').modal('show');
Set backdrop and keyboard to false prevent the modal closing when clicking outside it.
将背景和键盘设置为 false 以防止在其外部单击时关闭模态。
$(function() {
$('#myModal').modal({backdrop:false,keyboard:false});
$('#myModal').modal('show');
});
$(function() {
$('#myModal').modal({backdrop:false,keyboard:false});
$('#myModal').modal('show');
});
$('#myModal').modal({backdrop:'static',keyboard:false, show:true});
Or set the backdrop to static, from the docs: "Alternatively, specify static for a backdrop which doesn't close the modal on click.", see also Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?
或者从文档中将背景设置为静态：“或者，为单击时不关闭模态的背景指定静态。”，另请参阅防止 Bootstrap 模态在单击外部或按 Esc 时消失？
回答by Nowdeen
To make modal undismissable you can set backdrop static without javascript:
要使模态不可关闭，您可以在没有 javascript 的情况下设置背景静态：
<div class="modal" data-backdrop="static" ... >
Open onload using:
使用以下方法打开加载：
$('#your_modal').modal('show');
