页面加载时自动加载 Bootstrap 模式答案

【问题标题】：Load Bootstrap modal automatically when page loads页面加载时自动加载 Bootstrap 模式
【发布时间】：2014-05-15 04:04:34
【问题描述】：

页面加载时如何自动加载Bootstrap模型？

我尝试将以下内容添加到我的索引文件中：

<script type="text/javascript">
    $(window).load(function () {
        $('#myModal').modal('show');
    });
</script>

但它不起作用。

【问题讨论】：

你的 js 控制台说什么？如果没有错误，请在$('#myModal').modal('show'); 行上放置一个断点，看看它是否被调用。如果它被调用并且你在脚本控制台中没有错误，那么请把整个源代码放好，这样我们就可以看到整个画面。
可能是您在页面开头编写了此代码..您需要在您的模态窗口代码之后编写它..所以模态的内容首先执行然后它会启动..
在window的load事件中，意思是所有内容都加载完毕后执行
先创建模态，然后显示。你试图.modal('show') 什么都没有。
Google 在 stackoverflow 上返回了五个同样问题的页面。

标签： html css twitter-bootstrap

【解决方案1】：

试试这个，它应该可以工作：

<script type="text/javascript">
    $(document).ready(function () {
        $('#myModal').modal('show');
    });
</script>

【讨论】：

它对我不起作用，如果我手动单击指向同一个 div #myModal 的链接，它会打开对话框..

【解决方案2】：

基于 Black Ops 的回答，我注意到这可能是针对旧版本的 Bootstrap。在较新的版本中，第一次单击按钮时，它会初始化模态。这需要在显示之前发生。因此，您需要使用：.modal({show:true}) 来代替：.modal(show)，它会初始化模态实例，然后将其设置为默认显示。所以：

<script type=\"text/javascript\">
  jQuery(document).ready(function() {
    jQuery('#myModalId').modal({show:true});
  });
</script>

您还可以在这些 {} 中为模式设置其他设置。设置详情见Bootstrap's Model Doc。

【讨论】：

【解决方案3】：

尝试在表单中指定作为默认值的值

<div class="input-group date" id='dob' name="dob" data-date-format="yyyy-mm-dd" >
        <input type="text" name="dob" id="dob" ***value="1940-01-01***"   maxlength="20" class="form-control"  required title="Please enter the date of birth">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>

和脚本

<script type="text/javascript">
    $(document).ready(function() {
        $('#dob').datepicker({
          startDate: '1940-01-01',
          endDate: '-5d'
        })
    });
    </script

【讨论】：

这与 OP 有何关系