I have a simple jquery Modal Plugin. It works good. But there's a problem. There is two features. One modal for auto fade out and another is for Clickable fade out. But I want to combine both of them. Like, modal that have click close fade out features, will also have auto fade out features. That's mean I want a modal with both features, Close button for fade Out and will also fade it automatically.

Look at my code:

<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="#"  data-toast="toast-name-1">Normal Toast</a>
<a href="#"  data-toast="toast-name-2">Auto FadeOut Toast</a>
<div >
  <!-- Toast -->
  <div  id="toast-name-1">
    <a href="#" >&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div  id="toast-name-2">
    <a href="#" >&#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>

That's mean a modal with both features (auto fade out and click fade out)

CodePudding user response：

Like this? The toasts will auto fade out after a delay and on click. Added comments to clarify what the code does if anyone else finds this answer.

$(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="#"  data-toast="toast-name-1">Normal Toast</a>
<a href="#"  data-toast="toast-name-2">Auto FadeOut Toast</a>
<div >
  <!-- Toast -->
  <div  id="toast-name-1">
    <a href="#" >&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div  id="toast-name-2">
    <a href="#" >&#10006;</a>
    <b>Messege 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>