在页面加载上启动引导模式

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

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

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

当前回答

你不需要javascript来显示模态

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

class="modal fade hide"

class="modal fade in"

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

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

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

2013-07-03 09:39:37

其他回答

只需将你想要在页面加载时调用的模态包装在文档头部的jQuery load事件中，它就会弹出，如下所示:

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

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

你仍然可以在你的页面中调用模态，通过这样的链接调用它:

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>

2012-04-19 18:52:06

就像其他人提到的，用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>

希望这能有所帮助

2018-03-27 12:27:44

你可能想要保持jquery.js延迟，以更快的页面加载。但是，如果jquery.js被延迟到$(window)。负载可能不工作。那么你可以试试

setTimeout（function（）{$（'#myModal'）.modal（'show'）;}，3000）;

它会在页面完全加载后弹出你的模态(包括jquery)

2015-03-25 15:52:29

<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"

2013-03-05 17:12:57

这里有一个解决方案[没有javascript初始化!］

我找不到一个例子，没有初始化你的模式与javascript， $('#myModal').modal('show')，所以这里有一个建议，你可以实现它没有javascript延迟页面加载。

用类和样式编辑你的modal容器div:

Edit your body with class and style: <body class="modal-open" style="padding-right:17px;"> Add modal-backdrop div <div class="modal-backdrop in"></div> Add script $(document).ready(function() { $('body').css('padding-right', '0px'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#MyModal').modal('show'); }); What will happen is that the html for your modal will be loaded on page load without any javascript, (no delay). At this point you can't close the modal, so that is why we have the document.ready script, to load the modal properly when everything is loaded. We will actually remove the custom code and then initialize the modal, (again), with the .modal('show').

2016-10-23 12:32:04

在页面加载上启动引导模式

推荐文章

最新文章

标签