我根本不懂JavaScript。Bootstrap文档说到

通过JavaScript调用modal: $('#myModal').modal(options)

我不知道如何在页面加载上调用这个。使用Bootstrap页面上提供的代码,我可以成功地在元素单击上调用模态,但我希望它立即在页面加载上加载。


当前回答

就像其他人提到的,用display:block创建你的模态

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

将背景放置在页面的任何地方,它不一定要在页面的底部

<div class="modal-backdrop fade show"></div> 

然后,为了能够再次关闭对话框,添加这个

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

希望这能有所帮助

其他回答

在bootstrap 3中,你只需要通过js初始化模态,如果在页面加载的时刻,模态标记在页面中,模态就会显示出来。

如果你想防止这种情况,可以在初始化模态的地方使用show: false选项。就像这样: $ (' .modal ')。Modal ({show: false})

在我的例子中,添加jQuery来显示模态不起作用:

$(document).ready(function() {
    $('#myModal').modal('show');
});

这似乎是因为模态有属性aria-hidden="true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

需要删除该属性以及上面的jQuery:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

请注意,我尝试将模态类从模态渐变更改为模态渐变,但这并不奏效。此外,将模态淡出类更改为模态显示类也阻止了模态关闭。

您可以通过数据属性激活模态,而不需要编写任何JavaScript。

选项"show"设为true显示初始化时的模态:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

你不需要javascript来显示模态

最简单的方法是将"hide"替换为"in"

class="modal fade hide"

so

class="modal fade in"

你需要添加onclick = "$('.modal').hide()"按钮关闭;

PS:我认为最好的方法是添加jQuery脚本:

$('.modal').modal('show');
<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

即使没有Javascript,你也可以在开始时显示它。只需删除类“hide”。

class="Modal"