不允许关闭Twitter引导模式窗口

我正在使用Twitter引导创建一个模态窗口。默认的行为是，如果你点击模式区域之外，模式将自动关闭。我想禁用，即不关闭模式窗口时，点击模式之外。

有人可以分享jQuery代码来做到这一点吗?

当前回答

只需为背景设置静态选项(背景:'static')。为了防止在键盘上按Esc键关闭模式，你必须将键盘选项设置为false(键盘:false)

所以，代码将是。

var jq = jQuery.noConflict();
jq(document).ready(function(){
    jq('#exampleModal').modal({backdrop: 'static', keyboard: false}); 
});

2022-10-21 09:15:59

其他回答

根据bootstrap 5更新的语法如下。参考链接

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" >

2021-11-30 07:32:17

大雄的答案适用于单一情况，但我在一个旧网站上有20-30个情态动词，正在寻找一个答案，为每个用bootstrap打开的情态动词设置这个。

您可以针对模式的事件名称空间，并为每个引导模式添加默认设置。

你可能不想对每个模式都这样做，但如果你这样做了，就没有必要静态地指定每个模式调用。

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    var $this = $(this)
    var href = $this.attr('href')
    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
    var option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data(), {backdrop: 'static', keyboard: false})

    e.preventDefault()

    $target
      .modal(option)
      .one('hide', function () {
        $this.focus()
      })
})

在我的例子中，我在选项结构中添加了{background: 'static'， keyboard: false}。

2022-11-15 21:47:09

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

2017-07-06 09:49:38

作为答案提出的解决方案不起作用，有什么问题?

$(document).ready(function(){ $('.modal').modal('show'); $('.modal').modal({ backdrop: 'static', keyboard: false }) }); <html> <head> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <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"> <div class="text-right"><button type="button" class="btn btn-primary">print</button></div> </div> </div> </div> </div> </body> </html>

2020-10-28 14:38:46

有点像@AymKdn的答案，但这将允许您在不重新初始化模态的情况下更改选项。

$('#myModal').data('modal').options.keyboard = false;

或者如果你需要做多个选项，JavaScript的with在这里派上用场!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

如果模式已经打开，这些选项将只在模式下次打开时生效。

2013-04-25 22:10:41

不允许关闭Twitter引导模式窗口

推荐文章

最新文章

标签