在页面加载时启动 Bootstrap 模式

IT技术 javascript html twitter-bootstrap events bootstrap-modal
2021-01-16 03:02:07

我根本不懂 JavaScript。Bootstrap 文档说

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

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

6个回答

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

JS

<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>
另一个重要的注意事项：很多人将他们的 javascript 包含在正文的末尾。在这种情况下，onload 函数必须包含在最后，在包含之后。
2021-03-25 03:02:07
@racl101 对我来说正好相反（自从你发帖已经 2 年了，所以事情可能已经改变了）。它仅适用于$(document).ready( ...当我将此脚本存储在我的模态的 MVC PartialView 中时，该模态在用户单击某物时动态添加，所以也许这就是原因。具有讽刺意味的是，你对不该做什么的警告让我想出了如何让它为我工作。那谢谢啦？:)
2021-04-01 03:02:07
这个答案是正确的。需要注意的一件事是，这对文档就绪事件根本不起作用：$(document).ready( ... . 它仅适用于窗口加载事件：$(window).load( ... 。
2021-04-02 03:02:07
Hide 对我不起作用（作为class），因为引导程序否决了它，因此不会显示任何内容。它看起来很糟糕（不像模态）而且当你按下按钮时它也没有关闭。javascript 部分有效，但我建议使用 GAURAV MAHALE 在他的回答中使用的模态的 html 部分，但请注意在他的模态类中删除“显示”一词。
2021-04-05 03:02:07
只需首先包含 jQuery 库！
2021-04-07 03:02:07

你不需要javascript显示模态

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

class="modal fade hide"

所以

class="modal fade in"

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

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

$('.modal').modal('show');
上面的 jquery 解决方案效果很好。一行代码就可以解决问题。@NickGreen 试一试：class="modalfade"。删除“隐藏”和“进入”。这在我的情况下有效，但它还没有上线，否则我会发布链接。
2021-04-10 03:02:07
我试过这种方法，但有两个问题。1）模态不会关闭。2）模态背景消失了。有任何想法吗？
2021-04-11 03:02:07

只需添加以下内容-

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

@boris，将此添加到模式关闭按钮： onclick = "$('.modal').removeClass('show').addClass('fade');"
2021-03-16 03:02:07
这取决于需要显示模态的场景，在我的情况下，我希望模态永久卡住。
2021-03-20 03:02:07
也遇到了Bob的问题
2021-03-29 03:02:07
此解决方案不起作用：对话框永久卡在页面顶部。此外，如果您将“淡入淡出”类与“模态”一起使用，则该对话框根本不会出现。
2021-04-10 03:02:07
如果他们什么都不做，为什么要关闭按钮？有什么办法可以让它发挥作用吗？
2021-04-11 03:02:07

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

$(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>

可以在此处找到更多信息。

认为你有完整的答案。

对我来说，这段代码是唯一一个运行良好的代码。谢谢。
2021-03-19 03:02:07
感谢您发布头部所需的链接:)
2021-04-08 03:02:07

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

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

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

其它你可能感兴趣的问题
上一篇Chrome 扩展代码 vs 内容脚本 vs 注入脚本 下一篇创建一个重复多次相同元素的数组