css Jquery模态自动淡出和关闭效果不起作用

bis0qfac 于 2022-12-15 发布在 jQuery

关注(0)|答案(1)|浏览(162)

我有一个简单的jquery模态插件。它工作得很好。但有一个问题。有两个功能。一个模态自动淡出，另一个是可点击淡出。但我想合并两者。喜欢，模态有点击关闭淡出功能，也将有自动淡出功能。这意味着我想要一个模态与这两个功能，关闭按钮淡出，也将自动淡出。
看看我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
.toast-container {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}
[class*="toast-pos-"] {
  position: absolute;
  padding: 10px;
}
.toast-pos-top {
  top: 0;
}
.toast-pos-right {
  right: 0;
}
.toast-pos-bottom {
  bottom: 0;
}
.toast-pos-left {
  left: 0;
}
.toast {
  display: none;
  padding: 20px;
  margin: 20px 0;
  background: #eeeeee;
  color: #333333;
}
.close-toast {
  float: right;
  text-decoration: none;
  color: #ffffff;
  vertical-align: middle;
}
/* Aditional Styles */
body {
  padding: 60px 40px;
  background: #42A5F5;
  font-family: sans-serif;
}
.toast-trigger {
  color: #ffffff;  
}
.toast {
  background: rgba(255,255,255,.5);
  color: #FFFFFF;
}
.toast-trigger {
  display: inline-block;
  top: 50%;
  left: 50%;
  margin: 10px;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
  transition: ease .2s;
}
.toast-trigger:hover {
  background: #ffffff;
  color: #009688;
}
</style>        
        
<a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a>
<a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a>
<div class="toast-container toast-pos-right toast-pos-bottom">
  <!-- Toast -->
  <div class="toast" id="toast-name-1">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div class="toast" id="toast-name-2">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>
<script type="text/javascript">
$(".toast-trigger").click(function(e){
  e.preventDefault();
  datatoast = $(this).attr("data-toast");
  if ( $( this ).hasClass( "toast-auto" ) && !$("#" + datatoast).is(":visible") ){ 
    $("#" + datatoast).fadeIn(300).delay(2000).fadeOut(300);
  }
  else if ( !$("#" + datatoast).is(":visible") ){
    $("#" + datatoast).fadeIn(300);
  };
});

$(".close-toast").click(function(e){
  e.preventDefault();
  closetoast = $(this).parent().attr("id");
  $("#" + closetoast).fadeOut(300);
});
</script>

这意味着一个模态与两个功能（自动淡出和点击淡出）

css

来源：https://stackoverflow.com/questions/74790083/jquery-modal-auto-fadeout-and-close-effect-not-working-altogether

1条答案

按热度按时间

sqougxex1#

像这样吗？祝酒词会在延迟和点击后自动淡出。添加了注解来澄清如果其他人找到这个答案，代码会做什么。

$(document).ready(function() {
  // Attach a click event listener to the toast triggers
  $('.toast-trigger').click(function() {
    // Get the id of the clicked toast trigger
    var id = $(this).attr('data-toast');
    // Use the id to select the corresponding toast and fade it in
    $('#' + id).fadeIn(300);
    // Set a delay of 2000 milliseconds before closing the toast.
    setTimeout(function() {
      // Select the toast and fade them out
      $('#' + id).fadeOut(300);
    }, 2000);
  });

  // Select the close buttons and attach a click event listener
  $('.close-toast').click(function() {
    // Get the id of the parent id of the close button.
    var id = $(this).parent().attr('id');
    // Use the id to select the corresponding toast and fade it out
    $('#' + id).fadeOut(300);
  });
});

.toast-container {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}
[class*="toast-pos-"] {
  position: absolute;
  padding: 10px;
}
.toast-pos-top {
  top: 0;
}
.toast-pos-right {
  right: 0;
}
.toast-pos-bottom {
  bottom: 0;
}
.toast-pos-left {
  left: 0;
}
.toast {
  display: none;
  padding: 20px;
  margin: 20px 0;
  background: #eeeeee;
  color: #333333;
}
.close-toast {
  float: right;
  text-decoration: none;
  color: #ffffff;
  vertical-align: middle;
}
/* Aditional Styles */
body {
  padding: 60px 40px;
  background: #42A5F5;
  font-family: sans-serif;
}
.toast-trigger {
  color: #ffffff;  
}
.toast {
  background: rgba(255,255,255,.5);
  color: #FFFFFF;
}
.toast-trigger {
  display: inline-block;
  top: 50%;
  left: 50%;
  margin: 10px;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
  transition: ease .2s;
}
.toast-trigger:hover {
  background: #ffffff;
  color: #009688;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a>
<a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a>
<div class="toast-container toast-pos-right toast-pos-bottom">
  <!-- Toast -->
  <div class="toast" id="toast-name-1">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div class="toast" id="toast-name-2">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

赞(0）回复(0）举报 2022-12-15

我来回答

css Jquery模态自动淡出和关闭效果不起作用

1条答案

相关问题

热门标签

最新问答