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

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

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

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

当前回答

这里有一个解决方案[没有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

其他回答

为了避免引导被否决并失去它的功能，只需创建一个常规的启动按钮，为它提供一个Id，然后使用jquery“点击它”，如下所示: 启动按钮:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

jQuery触发器:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

希望能有所帮助。干杯!

2019-10-14 17:30:38

关于安德烈的伊里奇说你必须补充 js脚本在你称之为jquery的行之后:

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>

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

对我来说，这就是问题所在，希望能有所帮助

2014-07-22 13:50:06

只需添加下面的-

class="modal show"

工作示例,

2014-07-19 07:32:33

除了user2545728和Reft的答案，没有javascript，但与情态背景

添加3件事

一个在.modal类之前带有modal- background类的div Style ="display:block;"到.modal类与.modal类一起淡出

例子

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

2016-11-14 11:32:12

在我的例子中，添加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">

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

2015-02-11 22:12:26

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

推荐文章

最新文章

标签