JQuery pop-up prompt information simplified version (automatically disappears), jquery pop-up prompt information

JQuery pop-up prompt information simplified version (automatically disappears), jquery pop-up prompt information

I have read some jQuery pop-up plug-ins such as blockUI, Boxy, and tipswindow. However, my requirements are not high. I just need to pop up a prompt after saving the plug-in, as for the pop-up layer of the complex points that can be edited, I directly implemented it using the bootstrap modal, so I made a simple function that can be used to pop up the prompt information.

First, put a prompt span: <span id = "tip"> </span> on the page. Next, set the style for it:

Prompt message Style

#tip {    font-weight: bold;    position: absolute;    top: 50px;    left: 50%;    display: none;    z-index: 9999;}

Prompt message script

// Tip indicates the prompt information, type: 'success' indicates the success information, danger indicates the failure information, and info indicates the normal information function showTip (tip, type) {var $ tip = $ ('# tip'); $ tip. attr ('class', 'alert alert-'+ type).text(tip;.css ('margin-left',-$ tip. outerWidth ()/2 ). fadeIn (500 ). delay( 2000 ). fadeOut (500 );}

 

In this way, a simple jQuery pop-up prompt is complete. In other words, what has been done above? In fact, a prompt message is displayed, which is located at top50px, left50 % on the webpage, and then shifted half of the width of the information by using margin-left, in this way, fadeIn is displayed for half a second in the middle left and right, staying for 2 seconds, and then fadeOut disappears for half a second. In addition, I used the bootstrap alert-success alert-danger alert-info style to beautify the pop-up information.

However, there is a problem. If the text is too short and it is difficult to do so, add a minimum width to it # tip:

min-width: 200px;text-align: center;

As for why don't I add a parameter to the showTip method to set the stop time of the pop-up information, I just don't need this parameter. It's just my personal style. Another problem is that the showTip method is inconvenient to use. encapsulate it again:

function showInfo(msg) {    showTip(msg, 'info');}function showSuccess(msg) {    showTip(msg, 'success');}function showFailure(msg) {    showTip(msg, 'danger');}

In this way, you can call the ShowSuccess or ShowFailure method when ajax returns information that requires a prompt.

In addition, if the webpage has an iframe inline framework, if the iframe also requires a prompt message from the main framework, you must change the showTip method:

// Tip indicates the prompt information, type: 'success' indicates the success information, danger indicates the failure information, and info indicates the normal information function showTip (tip, type) {var win = parent? Parent: window; var $ tip =$ ('# tip', win.doc ument); $ tip. attr ('class', 'alert alert-'+ type).text(tip;.css ('margin-left',-$ tip. outerWidth ()/2 ). fadeIn (500 ). delay( 2000 ). fadeOut (500 );}

 

Sample Code
Jquery pop-up layer, disappears in a few seconds

First, add a prompt layer and hide it.
<Div id = "addBox" style = "display: none;"> saved </div>
Click "add" to display it. After a while, hide it.
$ ("$ AddBox"). show ();
SetTimeout ($ ("$ addBox"). Hides (), 3000)

How to Use Jquery to automatically disappear after a pop-up box is triggered?

SetTimeout (function (){
$ ('. Pop'). empty (). remove ();

}, 2000)