Question

我有一个带有按钮的html页面，该按钮在单击时显示和隐藏div（最初是隐藏的）。
当可见时，我只希望该div是可单击的，而不是其他任何元素。这是代码段

$(document).ready(function() {
  $('#mybtn').click(function() {
  //to make the '.frontdiv' visible
    $(".frontdiv").toggle( );
    $('*').off("click")
    $('.frontdiv').on("click")
  });
  //by pressing the 'x' button i want the '.frontdiv' to hide again and make the whole body clickable again
  $('.x').click(function() {
    $(".frontdiv").toggle();
  });  
  
});

body {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.backdiv {
  background-color: skyblue;
  width: 100%;
  height: 400px;
}

.frontdiv {
  display: none;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  position: absolute;
  background-color: yellow;
  margin-top: 5%;
  margin-left: 15%;
  width: 60%;
  height: 100px;
}

#mybtn {
  border: 1px solid green;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 25px;
  margin-left: 30px;
  background-color: red;
  color: white;
}

.x {
  margin-top: 0px;
  margin-left: 92%;
  padding: 1px;
  background-color: red;
  color: white;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="backdiv">
    <div class="frontdiv"><button class="x"> x </button></div>
    <button id="mybtn">CLICK</button>
  </div>
</body>

通过运行代码段，一定很清楚我在这里要实现的目标，所以请帮助我
也：当我单击该div以外的任何位置时，如何使'.frontdiv'消失？

Answer 1

我添加了一个额外的div，名为<div class="popup">。该div会覆盖整个屏幕，并将<div class="frontdiv"> div居中。由于我们要切换<div class="popup"> div，因此切换弹出框的X现在可以使用。

请检查代码片段以获取结果。

$(document).ready(function() {
  $('#mybtn').click(function() {
    $(".popup").toggle();
  });
  $('.x').click(function() {
    $(".popup").toggle();
  });  
  
});

body {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.backdiv {
  background-color: skyblue;
  width: 100%;
  height: 400px;
}

.popup{
  display: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.frontdiv {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  background-color: yellow;
  width: 60%;
  height: 100px;
}

#mybtn {
  border: 1px solid green;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 25px;
  margin-left: 30px;
  background-color: red;
  color: white;
}

.x {
  margin-top: 0px;
  margin-left: 92%;
  padding: 1px;
  background-color: red;
  color: white;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="backdiv">
    <button id="mybtn">CLICK</button>
  </div>
  <div class="popup">
    <div class="frontdiv">
      <button class="x"> x </button>    
    </div>
  </div>
</body>

使用jQuery使整个div不可单击，除了一个div

1 个答案: