css - 如何创建默认情况下不会消失和加载的 Bootstrap 静态模式

Question

尝试在 codeignitor 中为永久显示引导模式的登录页面创建一个视图。我可以通过添加按钮来获得模态弹出窗口，但我不知道如何在页面加载时默认显示模态。

我从文档中复制并粘贴了以下内容，但页面上没有显示任何内容，它只显示在源代码中。

<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">&times;</button>       

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</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 -->

Answer 1

在准备好的文档上通过 javascript 打开模式$('#myModal').modal('show');

将背景和键盘设置为 false 以防止在模式外部单击时关闭。

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

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

或者从文档中将背景设置为静态：“或者，为单击时不关闭模式的背景指定静态。”，另请参见防止 Bootstrap 模式在单击外部或按下退出时消失？

Answer 2

您可以通过删除类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">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>

            <div class="modal-body">
                <p>One fine body&hellip;</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 -->

检查演示

Answer 3

要使模态不可关闭，您可以在没有 javascript 的情况下设置背景静态：

 <div class="modal" data-backdrop="static" ... >

使用以下命令打开 onload：

$('#your_modal').modal('show');