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

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

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

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

当前回答

您可以尝试这个可运行的代码-

$(window).load(function() { $('#myModal').modal('show'); }); <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

更多信息可以在这里找到。

我想你已经有了完整的答案。

2016-04-28 06:20:07

其他回答

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

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

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

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

2015-03-25 15:52:29

也许已经晚了，但是，一旦我不能解决这个订单问题，模态没有显示;我使用jquery点击();

我试过了，效果不错:)

创建一个按钮，调用Modal show >样式的按钮作为display: none; 例子:

$( "#clickme" ).click(); <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <input type="button" value="0" id="clickme" style="display:none;" data-toggle="modal" data-target="#exampleModal" />  <div id="exampleModal" class="modal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Clicked Successfully</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body></html>

2021-05-31 09:45:05

除了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

关于安德烈的伊里奇说你必须补充 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

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

推荐文章

最新文章

标签