Bootstrap 4 - 避免屏幕点击的模式关闭答案

【问题标题】：Bootstrap 4 - Avoid modal closing for on-screen clickBootstrap 4 - 避免屏幕点击的模式关闭
【发布时间】：2016-04-23 05:03:10
【问题描述】：

在 rails 4 中，我使用的是引导插件。当我使用模态功能时，我需要解决关闭事件问题。当模式打开时，当我单击“x”图标或“Esc”按钮时它应该关闭，否则它应该始终打开。现在，当我单击不包括模态表单区域的屏幕时，它将关闭。

在main.erb中，

<div class="modal fade" id="main-lightbox-container" tabindex="-1" role="dialog" aria-labelledby="main-lightbox-container" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

在form.js.erb中，

var content = "<%= escape_javascript(render(:partial=>"form", :locals=>{:user=>@user})) %>";
var container = $('#main-lightbox-container');
container.find('.modal-content').html(content);
container.modal({});

这里我通过 ajax 请求加载模态表单。如何解决此屏幕点击问题？请帮帮我。

【问题讨论】：

试试这个：- container.modal({ backdrop: 'static', keyboard: false});
谢谢。它工作正常。但是我需要在按下Esc 键时关闭表单，所以我只使用了backdrop: 'static'。
是的，你可以移除键盘道具:)
Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?的可能重复
谢谢。我当时没听懂。

标签： javascript jquery css ruby-on-rails twitter-bootstrap

【解决方案1】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">    </script>

<div data-toggle="modal" data-target="#modalid">Open</div>  
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    </div>
    <div class="modal-body" style="background-color: #F0F0F0">
    Content
    </div>
</div>
</div>

【讨论】：

【解决方案2】：

<div id="myModal" data-keyboard="false" data-backdrop="static">

just add data-keyboard="False" and data-backdrop="static" it works for me.

【讨论】：