Question

我有jquery

 jQuery(document).ready(function(){ 

jQuery('.et_pt_item_image').click(function(){ // attach a function to elements with the class "unhide"
   jQuery(this).closest('.et_pt_item_image').find('.hidden').show(); // Look for the closest parent of this item with the class "holder" and find the hidden div, show it
   jQuery(this).closest('.et_pt_item_image').find('.hidden').delay( 800 ).hide(1000); // find the same element and close after delay, take 1000 ms to close. 
});

}）;

<div class="et_pt_item_image"><div class="hidden"> hello Im a popup </div></div>

此时盒子正在消失延迟（800）.hide（1000）但是我希望盒子上有一个x按钮，只有在点击x时才会消失。我该怎么做呢？

Answer 1

你可能想做这样的事情：

$('.box .close').on('click', function() {
  $(this).parent().fadeOut();
});

.box {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid black
}
.box .close {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.box .inner {
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
  <div class="close">X</div>
  <div class="inner">
    This is a popup!
  </div>
</div>

Answer 2

在弹出窗口中添加一个关闭按钮，然后单击关闭按钮调用以下脚本

jQuery（this）.closest（'。et_pt_item_image'）。find（'。hidden'）。delay（800）.hide（1000）;

Answer 3

将隐藏的类定义为

隐藏{visible：none;}

现在如果你想隐藏图片，那就做$（'＃idofthediv'）。addClass（'hidden'）并显示$（'＃idofthediv'）。removeClass（'hidden'）

jquery popup如何添加x关闭按钮？

3 个答案: