Javascript 在页面加载时启动 Bootstrap Modal

Launch Bootstrap Modal on page load

提问by Brandon

I don't know javascript at all. The bootstrap documentation says to

我根本不懂 javascript。引导程序文档说

Call the modal via javascript: $('#myModal').modal(options)

通过 javascript 调用模态： $('#myModal').modal(options)

I have no clue how to call this on a page load. Using the supplied code on the bootstrap page I can successfully call the Modal on an element click, but I want it to load immediately on a page load.

我不知道如何在页面加载时调用它。使用引导页面上提供的代码，我可以在元素单击时成功调用 Modal，但我希望它在页面加载时立即加载。

回答by Andres Ilich

Just wrap the modal you want to call on page load inside a jQuery loadevent on the head section of your document and it should popup, like so:

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

JS

JS

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

HTML

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>

You can still call the modal within your page with by calling it with a link like so:

您仍然可以通过使用如下链接调用它来调用页面中的模态：

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

回答by user2545728

You don't need javascriptto show modal

你不需要javascript显示模态

The simplest way is replace "hide" by "in"

最简单的方法是用“in”替换“hide”

class="modal fade hide"

so

所以

class="modal fade in"

and you need add onclick = "$('.modal').hide()"on button close;

并且您需要添加onclick = "$('.modal').hide()"按钮关闭；

PS: I think the best way is add jQuery script:

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

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

回答by GAURAV MAHALE

Just add the following-

只需添加以下内容-

class="modal show"

Working Example-

工作示例-

<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">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal show" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</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>

回答by Abrar Jahin

You can try this runnable code-

你可以试试这个可运行的代码——

$(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">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</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>

More can be found here.

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

Think u have your complete answer.

认为你有完整的答案。

回答by JPCS

regarding what Andre's Ilich say you have to add the js script after the line in what you call the jquery:

关于 Andre 的 Ilich 所说的你必须在你称之为 jquery 的行之后添加 js 脚本：

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

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

in my case that was the problem hope it helps

在我的情况下，这是问题希望它有所帮助

回答by Highly Irregular

In my case adding jQuery to display the modal didn't work:

在我的情况下，添加 jQuery 来显示模态不起作用：

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

Which seemed to be because the modal had attribute aria-hidden="true":

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

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

Removing that attribute was needed as well as the jQuery above:

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

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

Note that I tried changing the modal classes from modal fadeto modal fade in, and that didn't work. Also, changing the classes from modal fadeto modal showstopped the modal from being able to be closed.

请注意，我试图改变模式类modal fade来modal fade in，并没有奏效。此外，将类从 更改modal fade为modal show停止模式无法关闭。

回答by Reft

Heres a solution [without javascript initialization!]

这是一个解决方案 [没有 javascript 初始化！]

I couldn't find an example withoutinitializing your modal with javascript, $('#myModal').modal('show'), so heres a suggestion on how you could implement it without javascript delayon page load.

我无法找到一个例子，而不使用JavaScript初始化的模式，$('#myModal').modal('show')，所以继承人你如何能实现它没有一个建议的JavaScript延迟页面加载。

1. Edit your modal container div with class and style:

1. 使用类和样式编辑模态容器 div：

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

1. Edit your body with class and style:

   <body class="modal-open" style="padding-right:17px;">

2. Add modal-backdrop div

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

3. 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').

2. 使用类和样式编辑您的身体：

   <body class="modal-open" style="padding-right:17px;">

3. 添加模态背景 div

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

4. 添加脚本

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });
   

   将会发生的是，您的模态的 html 将在页面加载时加载，没有任何 javascript，（没有延迟）。此时您无法关闭模态，这就是为什么我们有 document.ready 脚本，以便在加载所有内容时正确加载模态。我们将实际删除自定义代码，然后（再次）使用 .modal('show') 初始化模态。

回答by obiTheOne

You can activate the modal without writing any JavaScript simply via data attributes.

您只需通过数据属性即可激活模态，而无需编写任何 JavaScript。

The option "show" set to true shows the modal when initialized:

设置为 true 的选项“show”在初始化时显示模态：

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

回答by jBelanger

Like others have mentioned, create your modal with display:block

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

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

Place the backdrop anywhere on your page, it does not necesarily need to be at the bottom of the page

将背景放置在页面上的任何位置，它不一定需要位于页面底部

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

Then, to be able to close the dialog again, add this

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

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

Hope this helps

希望这可以帮助

回答by Zim

Update 2020 - Bootstrap 4

2020 年更新 - Bootstrap 4

The modal markup has changed slightly for Bootstrap 4. Here's how you can open the modal on page load, and optionally delay display of the modal...

Bootstrap 4 的模态标记略有变化。 以下是如何在页面加载时打开模态，并可选择延迟模态的显示...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Demo on Codeply

Codeply 上的演示