CODEWITHSUNDEEP
javascriptjqueryhtmlcss
dicle
dicle

Reputation: 1162

How to show alert after click the button again?

I have an alert that is triggered by a button and this alert dissapear after 3 seconds.

How can I show that alert every time we click the button ? Currently it works only once.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ex1">
  <button id="alert-trigger" data-dismiss="alert" class="btnClick">
    Trigger Alert
  </button>

  <div id="example" class="alert" role="alert"></div>

  <script type="text/template" id="alert-template">
    <p>
      <span lang="da">Merhaba</span>,
      hello,
      <span lang="ja">Hallo</span>
    </p>
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      window.setTimeout(function() {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function() {
          $(this).remove();
        });
      }, 3000);
    });
  </script>
</div>

Upvotes: 2

Views: 3630

Answers (2)

AndrewL64
AndrewL64

Reputation: 16341

With pure javaScript, just set the default opacity of the #example element to 0, change the opacity to 1 whenever your #alert-trigger button is clicked and use the setTimeout() method to change it back to 0 after 1 second.

With jQuery, just hide #example element by default and then simply use the fadeIn() method to fade it in on click and the use the setTimeout() method along with the fadeOut() method to fade the element out again after a set amount of seconds.

Check and run the following Code Snippets for practical examples of what I have described above:

Pure JavaScript approach:

/* JavaScript */

const btn = document.getElementById("alert-trigger");
const box = document.getElementById("example");

btn.addEventListener("click", function(){
	box.style.opacity = 1;
  setTimeout(function(){box.style.opacity = 0}, 1000);
});
/* CSS */

body {text-align: center;}#alert-trigger{background-color: green; padding: 5px; color: #FFF;}

#example {background-color: grey;padding: 10px;margin: 10px 0px;
  opacity:0; /* initial opacity value set to 0 */
  transition: all 1s; /* will fade the element instead of hiding/showing the element instantly */
}
<!-- HTML -->

<button id="alert-trigger">Trigger Alert</button>

<div id="example" >
  <h2>Box Content Here:</h2>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quia dolore cumque aliquid eaque nisi, eos praesentium delectus tempore quidem? Iure tenetur cupiditate, laborum, saepe aut alias voluptatem impedit molestias.</p>
</div>

jQuery approach:

/* JavaScript */

$("#alert-trigger").on("click", function(){
	$("#example").fadeIn(); // fade in the example div
  
  setTimeout(function(){
  	$("#example").fadeOut(); // fade out the example div
  }, 1000);
})
/* CSS */

#example {display:none;} /* initially hide it by default */
<!-- HTML -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="alert-trigger">Trigger Alert</button>

<div id="example" >
  <h2>Box Content Here:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quia dolore cumque aliquid eaque nisi, eos praesentium delectus tempore quidem? Iure tenetur cupiditate, laborum, saepe aut alias voluptatem impedit molestias.</p>
</div>

Upvotes: 2

Seba99
Seba99

Reputation: 1319

For the moment you don't bind any click event to that <button> I assume that you're looking for something like this :

 $(document).ready(function() {
    //First hide the alert :
      $("#example").hide();
      
    // then bind the click :
    $("#alert-trigger").on("click", function () {
      
      $("#example").fadeIn(); // Shows the alert
      
      window.setTimeout(function() {
        $("#example").fadeOut(); // hides it again
      }, 3000);
      
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ex1">
  <button id="alert-trigger" data-dismiss="alert" class="btnClick">
    Trigger Alert
  </button>

  <div id="example" class="alert" role="alert">I'm an ALERT !</div>
  
</div>

Upvotes: 3

Related Questions