Question

我创建了一个叠加层。

  <div class="overlay modal" id="11">
    <div class="background-overlay"></div>
      <div class="description">
        <div class="hidden-xs">
          <img src='img.jpg'/>
        </div>
      <div class="text">
        <p> Hand Wash Monitor </p>
        <p class='proj-title'> Android+Octave </p>
    </div>
  </div>
 </div>

然后使用bootstrap打开此叠加层。

<div class="col-md-4" id="1" data-toggle="modal" data-target="#11">
  <span class="glyphicon glyphicon-phone"></span>
  <h2>Android Programming</h2>
  <p> some text</p>
</div>

我希望在单击background-overlay上的任何位置时关闭叠加层，因此我创建了一个jquery onclick监听器。

$(document).ready(function(){
$('.background-overlay').on('click',function(){

$('.overlay').hide();
// $('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
  });
});

正如所料，上面的代码在点击相应的部分时会打开我的叠加层，并在点击背景时关闭。

但是有一个小故障，当我打开叠加层时，我只需要单击即可打开它。当我第二次尝试打开它时，我需要双击该部分打开它。

问题是因为我使用数据切换打开，但是jquery onclick来关闭它。

这是另一种方法，所以我可以使用单击打开我的叠加层，并在点击背景叠加时关闭。

这是它的外观，尝试重复打开和关闭相同的模态

https://pradeepsaiu.github.io/src/index.html

Answer 1

您可以使用GetSelectList

，而不是使用script来关闭模态

data-backdrop="true"

Answer 2

你可以试试这个

$(document).mouseup(function (e) {
  var container = $('#1');
  if  (!container.is(e.target) && container.has(e.target).length === 0){
     $('#1').modal('hide');
  }
)};

Answer 3

使用＆＃34;模态对话框＆＃34; class帮助我解决了这个问题，只是将我的modal内容包装在这个类中来解决问题。

 <div class="overlay modal" id="11">
**<div class = "modal-dialog">**
    <div class="background-overlay"></div>
      <div class="description">
         <div class="hidden-xs">
         <img src='img.jpg'/>
      </div>
      <div class="text">
          <p> Hand Wash Monitor </p>
          <p class='proj-title'> Android+Octave </p>
    </div>
  </div>
 </div>

默认情况下，模态覆盖不会关闭，使用jquery

3 个答案: