javascript - Alert show and disappear after period of time - Stack Overflow

admin管理员组

文章数量:1426053

My code is working but I want to show the alert for period of time (alert alert-warning) and for (alert alert-success) I also want to show the alert for period of time but after that it reload the page.

Screen below example for the (alert alert-warning)

It's working but it would be great if the alert-warning show and disappear after a period of time (I think 3 second should be nice).

Screen below for the (alert alert-success)

It's also working and I also want to show and disappear after a period of time but for this alert I want after the alert disappear it's directly reload the page (without close the x button)

this is my index.php

this is my register.php

and this is my main.js

My problem is in main.js, I tried some code it worked, but after the alert disappear (3second), when the user tries to display it again it don't worked anymore. Any advice would be appreciated.

My code is working but I want to show the alert for period of time (alert alert-warning) and for (alert alert-success) I also want to show the alert for period of time but after that it reload the page.

Screen below example for the (alert alert-warning)

It's working but it would be great if the alert-warning show and disappear after a period of time (I think 3 second should be nice).

Screen below for the (alert alert-success)

It's also working and I also want to show and disappear after a period of time but for this alert I want after the alert disappear it's directly reload the page (without close the x button)

this is my index.php

this is my register.php

and this is my main.js

My problem is in main.js, I tried some code it worked, but after the alert disappear (3second), when the user tries to display it again it don't worked anymore. Any advice would be appreciated.

• javascript
• php
• jquery
• html
• ajax

Share Improve this question Follow asked Nov 30, 2016 at 6:00 Victor HuangVictor Huang 4111 silver badge99 bronze badges 3

• Post code as text – user557846 Commented Nov 30, 2016 at 6:05
• You can use sweetalert plugin t4t5.github.io/sweetalert for this. – Chonchol Mahmud Commented Nov 30, 2016 at 6:07
• @Chonchol Mahmud , thanks, the plugin is nice. but i still want to know to solve the question I ask. :) – Victor Huang Commented Nov 30, 2016 at 7:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It didn't show because after success callback, you hide the element after 3 seconds of setTimeout. What you need to do is, before run setTimeout function, just show the element back to page like instance :

success : function () {
  $( '#register_message' ).show(); //show the element back
  $( '#register_message' ).html(''); // remove existing element
  $( '#register_message' ).html( data ); // adding new element ing from server side
  ...........
  the rest of the code
  ..........

}

For reload :

If the data ing from server side is an HTML code, then do like this :

success : function ( data ) {

   $( '#register_message' ).show(); //show the element back
   $( '#register_message' ).html(''); // remove existing element
   $( '#register_message' ).html( data ); // adding new element ing from server side

   setTimeout( function () {
      $( '#register_message' ).hide();
      // and at here you can check whether the html ing is success or error
      if ( $( data ).hasClass( 'alert-success' ) )
          location.reload();

   }, 3000 );

}

Try this:

setTimeout(function() { alert("my message"); }, time);

In place of JS alert() you can call bootstrap modal alert or Jquery UI dialog like alert.

本文标签： javascriptAlert show and disappear after period of timeStack Overflow