禁用在bootstrap模态区域外单击以关闭模态

作者: 扬尘
发布时间: 2024-12-21 01:45:54 (1月前)
转自：

14 条回复

0#
回复此人
扬尘 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用以下属性： <code> data-backdrop="static" </code> 或使用javascript： </p> <pre> <code> $('#myModal').modal({ backdrop: 'static', keyboard: false // to prevent closing with Esc button (if you want this too) }) </code> </pre> <P> 也看到这个答案： <a href="https://stackoverflow.com/questions/9894339"> 禁止关闭twitter bootstrap模式窗口 </A> </p> </DIV>

编辑
1#
回复此人
满目山河 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是最简单的一个 </p> <P> 您可以定义模态行为，定义数据键盘和数据背景。 </p> <pre> <code> <div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static"> </code> </pre> </DIV>

编辑
2#
回复此人
明天会更好 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您也可以在不使用JQuery的情况下执行此操作，如下所示： </p> <pre> <code> <div id="myModal"> var modal = document.getElementById('myModal'); modal.backdrop = "static"; modal.keyboard = false; </code> </pre> </DIV>

编辑
3#
回复此人
你瞎啊！撞我心了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在我的应用程序中，我使用下面的代码来通过jQuery显示Bootstrap模式。 </p> <pre> <code> $('#myModall').modal({ backdrop: 'static', keyboard: true, show: true }); </code> </pre> </DIV>

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

<div class =“post-text”itemprop =“text”> <P> 有两种方法可以禁用bootstrap模型区域外的点击以关闭模态 - </p> <OL> <LI> <P> 的<strong> 使用javascript </强> </p> <pre> <code> $('#myModal').modal({ backdrop: 'static', keyboard: false }); </code> </pre> </LI> <LI> <P> 的<strong> 在HTML标记中使用数据属性 </强> </p> <pre> <code> data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup. </code> </pre> </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”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> $(document).ready(function() { $("#popup").modal({ show: false, backdrop: 'static' }); $("#click-me").click(function() { $("#popup").modal("show"); }); }); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="modal" id="popup" style="display: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">脳</button> <h3>Standard Selectpickers</h3> </div> <div class="modal-body"> <select class="selectpicker" data-container="body"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <a id="click-me" class="btn btn-primary">Click Me</a> </body> <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
6#
回复此人
afs-loliaholic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> TLDR </H1> <P> <code> backdrop: 'static' </code> </p> <P> <a href="https://getbootstrap.com/docs/3.3/javascript/#modals-options" rel="nofollow noreferrer"> https://getbootstrap.com/docs/3.3/javascript/#modals-options </A> </p> <BLOCKQUOTE> <P> 指定 <code> static </code> 对于不关闭点击模式的背景。 </p> </BLOCKQUOTE> </DIV>

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

<div class =“post-text”itemprop =“text”> <P> 对我有用的解决方案如下： </p> <pre> <code> $('#myModal').modal({backdrop: 'static', keyboard: false}) </code> </pre> <P> background：禁用click outside事件 </p> <P> 键盘：禁用scape关键字事件 </p> </DIV>

编辑
8#
回复此人
镜乃Kagamino | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 </p> <pre> <code> $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static'; $.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false; </code> </pre> <P> 更改默认行为。 </p> </DIV>

编辑
9#
回复此人
呵呵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 根据您的屏幕宽度添加以下css。 </p> <pre> <code> @media (min-width: 991px){ .modal-dialog { margin: 0px 179px !important; } } </code> </pre> </DIV>

编辑
10#
回复此人
石茶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对我来说，bootstrap模态和jQuery模式之间存在混淆。这样做了（因为 <a href="http://jquerymodal.com/" rel="nofollow noreferrer"> jQuery模式 </A> ） </p> <pre> <code> $("#sticky").modal({ escapeClose: false, clickClose: false, showClose: false }); </code> </pre> </DIV>

编辑
11#
回复此人
IP地址 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另一种选择，如果您不知道模态是否已经打开，您需要配置模态选项： </p> <pre> <code> var $modal = $('#modal'); var keyboard = false; // Prevent to close by ESC var backdrop = 'static'; // Prevent to close on click outside the modal if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet $modal.modal({ keyboard: keyboard, backdrop: backdrop }); } else { // Modal has already been opened $modal.data('bs.modal').options.keyboard = keyboard; $modal.data('bs.modal').options.backdrop = backdrop; if(keyboard === false) { $modal.off('keydown.dismiss.bs.modal'); // Disable ESC } else { // $modal.data('bs.modal').escape(); // Resets ESC } } </code> </pre> </DIV>

编辑
12#
回复此人
氷寒 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal. As well as on ESC button. jQuery('#signUp').on('shown.bs.modal', function() { jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal. jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button. }) </code> </pre> </DIV>

编辑

登录后才能参与评论