PROSAGA码农传奇-Bootstrap-在页面加载时启动Bootstrap Modal

15 条回复

0#
回复此人
一腔诗意 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </code> </pre> <P> 即使没有Javascript，您也可以在启动时显示它。只需删除“隐藏”类。 </p> <pre> <code> class="Modal" </code> </pre> </DIV>

编辑
1#
回复此人
清月 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 更新2018 - Bootstrap 4 </强> </p> <P> 对于Bootstrap 4，模态标记略有改变。以下是如何在页面加载时打开模态，并可选择延迟显示模态... </p> <pre> <code> $(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> </code> </pre> <P> <a href="https://www.codeply.com/go/b5LjwrH3Sf/bootstrap-4-open-modal-page-load" rel="nofollow noreferrer"> 在Codeply上演示 </A> </p> </DIV>

编辑
2#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需在jQuery中包含要在页面加载时调用的模态 <code> load </code> 在文档的head部分上的事件，它应该弹出，如下所示： </p> <P> 的<strong> JS </强> </p> <pre> <code> <script type="text/javascript"> $(window).on('load',function(){ $('#myModal').modal('show'); }); </script> </code> </pre> <P> 的<strong> HTML </强> </p> <pre> <code> <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> </code> </pre> <P> 您仍然可以通过以下链接调用它来调用页面中的模态： </p> <pre> <code> <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> </code> </pre> </DIV>

编辑
3#
回复此人
无语 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可能想保留 <code> jquery.js </code> 延迟更快的页面加载。但是，如果 <code> jquery.js </code> 推迟了 <code> $(window).load </code> 可能行不通。那你可以试试 </p> <P> <code> setTimeout(function(){$('#myModal').modal('show');},3000); </code> </p> <P> 它会在页面完全加载后弹出你的模态（包括jquery） </p> </DIV>

编辑
4#
回复此人
解天 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> 继承人解决方案[没有javascript初始化！] </H2> <P> 我找不到一个例子的<strong> 无 </强> 用javascript初始化你的模态， <code> $('#myModal').modal('show') </code> 因此，有关于如何在没有的情况下实施它的建议的<strong> javascript延迟 </强> 在页面加载。 </p> <OL> <LI> 使用类和样式编辑模态容器div： </LI> </醇> <P> <code> <div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;"> </code> </p> <ol start =“2”> <LI> <P> 用类和风格编辑你的身体： </p> <P> <code> <body class="modal-open" style="padding-right:17px;"> </code> </p> </LI> <LI> <P> 添加模态背景div </p> <P> <code> <div class="modal-backdrop in"></div> </code> </p> </LI> <LI> <P> 添加脚本 </p> <pre> <code> $(document).ready(function() { $('body').css('padding-right', '0px'); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); $('#MyModal').modal('show'); }); </code> </pre> <P> 会发生什么是你的模态的html将加载页面加载没有任何JavaScript，（没有延迟）。此时你无法关闭模态，这就是为什么我们有document.ready脚本，以便在加载所有内容时正确加载模态。我们将实际删除自定义代码，然后使用.modal（'show'）初始化模式（再次）。 </p> </LI> </醇> </DIV>

编辑
5#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以尝试这个可运行的代码 - </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $(window).load(function() { $('#myModal').modal('show'); }); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <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> </code> </pre> </DIV> </DIV> <P> </p> <P> 可以找到更多的<strong> <a href="http://getbootstrap.com/javascript/#modals"> 这里 </A> </强> 。 </p> <P> 认为你有完整的答案。 </p> </DIV>

编辑
6#
回复此人
楊♡ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在bootstrap 3中，您只需要通过js初始化模态，如果在页面加载时，模态标记位于页面中，模式将显示。 </p> <P> 如果要阻止此操作，请使用该选项 <code> show: false </code> 在哪里初始化模态。像这样的东西： <code> $('.modal').modal({ show: false }) </code> </p> </DIV>

编辑
7#
回复此人
易米烊光 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 像其他人提到的那样，用display：block创建你的模态 </p> <pre> <code> <div class="modal in" tabindex="-1" role="dialog" style="display:block"> ... </code> </pre> <P> 将背景放在页面的任何位置，它不一定需要位于页面的底部 </p> <pre> <code> <div class="modal-backdrop fade show"></div> </code> </pre> <P> 然后，为了能够再次关闭对话框，添加它 </p> <pre> <code> <script> $("button[data-dismiss=modal]").click(function () { $(".modal.in").removeClass("in").addClass("fade").hide(); $(".modal-backdrop").remove(); }); </script> </code> </pre> <P> 希望这可以帮助 </p> </DIV>

编辑
8#
回复此人
淋了一整夜的雨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您只需通过数据属性即可激活模态而无需编写任何JavaScript。 </p> <P> 选项“show”设置为true表示初始化时的模态： </p> <pre> <code> <div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div> </code> </pre> </DIV>

编辑
9#
回复此人
Let us fly | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H2> 简单示例创建一个bootstrap模式的加载器微调器 </H2> <pre> <code> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('#myModal').modal('show'); setTimeout(function(){ $('#myModal').modal('hide'); }, 5000); }); </script> <style> .loader { border: 13px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 100px; height: 100px; -webkit-animation: spin 2s linear infinite; /* Safari */ animation: spin 2s linear infinite; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .modal-dialog{ width: 150px; margin: 10% auto; } .modal-content{ background-color: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; } </style> </head> <body> <div class="container">  <div class="modal fade" data-backdrop="static" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-body"> <div class="loader"></div> </div> </div> </div> </div> </div> </body> </html> </code> </pre> </DIV>

编辑
10#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 除了user2545728和Reft答案，的<strong> 没有javascript </强> 但随着 <code> modal-backdrop in </code> </p> <P> 的<strong> 要添加的3件事 </强> </p> <OL> <LI> 与班级的div <code> modal-backdrop in </code> 在.modal课之前 </LI> <LI> <code> style="display:block;" </code> 到.modal类 </LI> <LI> <code> fade in </code> 与.modal类一起 </LI> </醇> <P> 的<strong> 例 </强> </p> <pre> <code> <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> </code> </pre> </DIV>

编辑
11#
回复此人
只怕再见是故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你不需要 <code> javascript </code> 显示模态 </p> <P> 最简单的方法是用“in”代替“hide” </p> <pre> <code> class="modal fade hide" </code> </pre> <P> 所以 </p> <pre> <code> class="modal fade in" </code> </pre> <P> 你需要添加 <code> onclick = "$('.modal').hide()" </code> 按钮关闭; </p> <P> PS：我认为最好的方法是添加jQuery脚本： </p> <pre> <code> $('.modal').modal('show'); </code> </pre> </DIV>

编辑
12#
回复此人
࿏自ོ༾由ོ༽人͙⃡⌇ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用Bootstrap 3和jQuery（2.2和2.3）进行测试 </p> <pre> <code> $(window).on('load',function(){ $('#myModal').modal('show'); });  <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"><i class="fa fa-exclamation-circle"></i>  //Your modal Title</h4> </div> <div class="modal-body"> //Your modal Content </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> </code> </pre> <P> <a href="https://jsfiddle.net/d7utnsbm/" rel="nofollow noreferrer"> https://jsfiddle.net/d7utnsbm/ </A> </p> </DIV>

编辑
13#
回复此人
日耀九洲 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果你想 <EM> 显示模态 </EM> 当页面仍然加载时， <BR/> <BR/> 的<strong> 呼叫 </强> 的<strong> <code> $("modal_selector").modal("show") </code> </强> 内的<strong> <code> $("document").ready() </code> </强> 功能， <BR/> <BR/> 和的<strong> 关 </强> 在那里的<strong> <code> $(window).on("load") </code> </强> 活动！ <BR/> <BR/> <BR/> <BR/> 的<strong> 为什么？ </强> <EM> 看到 </EM> ： <a href="https://stackoverflow.com/a/3698214/9438347"> https://stackoverflow.com/a/3698214/9438347 </A> </p> </DIV>

编辑

登录后才能参与评论