Question

我已经创建了一个自定义模式（不是自举模式）并且希望它能够实现它如果我单击周围的背景，它会关闭模态。但是，使用我放在一起的代码，单击模态上的任何位置似乎也会关闭模态。我认为它可能与z-indexing有关，但是我已经尝试过的东西没有用。

HTML：

<div class="overlay" onclick="closeModal();">
   <div class="overlay-wrap">
      <div class="modal">
          This is my modal 
          <a href="javascript:;" onclick="closeModal();">X</a>
      </div>
   </div>
</div>

CSS：

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0px;
    top: 0px;
    display:table;
    z-index:9999;
    .overlay-wrap {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
    }
    .modal {
        display:inline-block;
        text-align:left;
        min-width:300px;
        max-width:90%;
        margin: 15px;
        background: #fff;
    }
}

Javascript：

function closeModal(ev) {
    $(ev.currentTarget).closest('.overlay').hide();
}

Answer 1

只需向click event添加.modal即可使用event.stopImmediatePropagation。下面的代码段：

＆＃13;

$(".overlay,.close").on('click',function(e){
  $(".overlay").hide();
});

$('.modal').on('click',function(e){
  e.stopImmediatePropagation();  
});

＆＃13;

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0px;
    top: 0px;
    display:table;
    z-index:9999;
  }
    .overlay-wrap {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
    }
    .modal {
        display:inline-block;
        text-align:left;
        min-width:300px;
        max-width:90%;
        margin: 15px;
        background: #fff;
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
   <div class="overlay-wrap">
      <div class="modal">
          This is my modal 
          <a class="close" href="javascript:;">X</a>
      </div>
   </div>
</div>

＆＃13;

Answer 2

只需向停止事件传播的模式添加一个侦听器：

HTML：

<div class="modal" onclick="stopEvent()">
          This is my modal 
          <a href="javascript:;" onclick="closeModal();">X</a>
</div>

JS：

function stopEvent(ev) {
        ev.stopPropagation();
});

Answer 3

$(document).ready(function(){
  
  $(document).on('click','#closeModal', function(){
  
    $('.overlay').hide()
    
  })
  
  $(document).on('click','.overlay', function(){
  
    $('.overlay').hide()
    
  })
  
})

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0px;
    top: 0px;
    display:table;
    z-index:9999;
    .overlay-wrap {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
    }
    .modal {
        display:inline-block;
        text-align:left;
        min-width:300px;
        max-width:90%;
        margin: 15px;
        background: #fff;
    }
}

<div class="overlay">
   <div class="overlay-wrap">
      <div class="modal">
          This is my modal 
          <a href="javascript:;" id="closeModal">X</a>
      </div>
   </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

试试这个，也许这有助于你。

单击背景时阻止自定义模式隐藏

3 个答案: