Question

我正在设计一个坚持移动屏幕底部的模态，为用户提供一些提示。所以基本上（非侵入式）Modal应该有两个属性，

活跃的背景（用户继续做她想做的事，不应该被迫阅读）
点击/点击

我能够同时实现这两种行为，但不能同时实现这两种行为。我提到this和this但到目前为止没有运气......

我正在使用Bootstrap 3.3.5。 Here是JSFiddle ..

<!-- Button to trigger modal -->
<a href="#myModal" role="button" data-backdrop="static" data-keyboard="false" class="btn" data-toggle="modal">Launch Modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-body">        
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   Modal Test
  </div>
</div>

Answer 1

在您的模态触发器a中添加一个属性data-backdrop="static"和data-keyboard="false"

  <a id="idModal" class="modal"  data-backdrop="static" data-keyboard="false" href="#">

如果在模态

之外点击，这将保持活着

单击

时从页面中删除此div

 $("#idModal").on("click",function(){   

   // div that we need to remove 
   //  <div class="modal-backdrop fade in"></div>
        $("div.modal-backdrop").remove();
 })

具有活动背景的Bootstrap Modal，在外部单击时不应关闭

1 个答案: