Question

我正在制作弹出窗口。当看起来我希望一切都不可点击但这个非常弹出。这里有一些糟糕的代码示例：

<div class="content-unclickable">
   <div class="popup-clickable">some info and buttons</div>
</div>

Answer 1

$('content-unclickable *').on('mousedown', function(e){
    e.preventDefault();
    e.stopPropagation();
    return false;
});

您可以返回false并使用e.preventDefault();阻止默认行为，e.stopPropagation();所有项目都会停止传播

Answer 2

我想你想在包含一些元素的页面上显示叠加层。

检查以下示例：

首先，如果您点击＆＃39;页面元素＆＃39;弹出警报。点击＆＃39;打开弹出窗口＆＃39;并且您希望能够点击页面元素＆＃39;：

＆＃13;

$('#open-popup').on('click', function() {
  $('#popup').show();
});
$('#page').on('click', function() {
  alert('you clicked on page!');
});
$('#popupElem').on('click', function() {
  alert('you clicked onside popup!');
});

＆＃13;

#popup {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:100;
  display:none;
}
.popup-inner {
  position:fixed;
  width:200px;
  height:150px;
  top:50%;;
  left:50%;
  margin-top:-75px;
  margin-left:-100px;
  background-color:#ececec;
  z-index:110;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="page">page element (click on me!)</span><br />
<span id="open-popup">open popup!</span>
<div id="popup">
   <div class="popup-inner">some info and buttons <b id="popupElem">click</b></div>
</div>

＆＃13;

让一切都无法点击但只有一个元素

2 个答案: