时间戳

首页 > 解决方案 > 什么对话框淡出，然后又重新出现？

jquery - 什么对话框淡出，然后又重新出现？

问题描述

我的页面在我的文件夹中显示图像，并允许通过 PHP 删除图像。我想显示删除任何图像的警报。

当您在警报中单击“否”时，它会淡出，然后立即再次淡入。为什么会这样？

在示例中单击任何图像，然后单击警报框中的“否”以查看我的问题。

$(document).ready(function() {
  $('.dele').each(function(i) {
    var $this = $(this);
    var newClass = "a" + i++;
    $this.addClass(newClass);
  });

  $('.alert').each(function(i) {
    var $jis = $(this);
    var jewClass = "b" + i++;
    $jis.addClass(jewClass);
    var hala = $jis.addClass(jewClass);
  });

  $(".dele").click(function() {
    $(this).children(".alert").fadeIn();
  });

  $("li.no, .alertclose").click(function() {
    $(".alert").fadeOut();
  });
});
body {
  margin: 20px;
  background-color: #999;
}

div.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  margin: -100px 0 0 -150px;
  z-index: 2;
  height: auto;
  box-shadow: 0px 0px 10px 0px #ccc;
  background-color: #fff;
  overflow: hidden;
  border-radius: 10px;
  padding: 1%;
  display: none;
  cursor: default;
}

div.note {
  width: 98%;
  padding: 1%;
  float: right;
  text-align: left;
  font-size: 14pt;
  line-height: 100%;
  direction: ltr;
  margin-bottom: 20px;
}

ul.yesorno {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center
}

ul.yesorno li {
  display: inline-block;
}

ul.yesorno li.no,
ul.yesorno li.inno {
  background-color: gainsboro;
  width: 50px;
  color: #999;
  padding: 5px;
  line-height: 150%;
  font-size: 12pt;
  border-radius: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
  margin-left: 5px
}

ul.yesorno li.yes a {
  background-color: #07BE03;
  width: 50px;
  color: #fff;
  display: inline-block;
  padding: 5px;
  line-height: 150%;
  font-size: 12pt;
  border-radius: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
  text-decoration: none;
}

img {
  width: 80px;
  height: 90px;
  margin: 5px;
  padding: 0;
  border: 2px solid #000;
}

div.dele {
  float: left;
  cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img1'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img2'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img3'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>
<div class="dele">
  <img src="https://cdn3.volusion.com/yuqpe.xcnnr/v/vspfiles/photos/25-cent-E-liquid-Sample-2.jpg?1475251487">
  <div class="alert">
    <div class="note">Are you sure?</div>
    <ul class="yesorno">
      <li class="yes"><a href="unlink.php?name='img4'">Yes</a></li>
      <li class="no">No</li>
    </ul>
  </div>
</div>

标签： jquerycss

解决方案

你能用下面的代码替换你的代码吗？经过测试并为我工作

$('body').on('click','li.no, .alertclose',function() {
    $(".alert").fadeOut();
});

推荐阅读