Pop-up warning dialog box beautification plug-in based on jQuery (warning, confirmation and prompt)

Pop-up warning dialog box beautification plug-in based on jQuery (warning, confirmation and prompt)_jquery

WBOY

Release： 2016-05-16 18:25:22

Original

1165 people have browsed it

I saw this plug-in on the official website not long ago, so I took a look at it when I had some time today and shared it with you. Maybe you already know

, if so, please skip it and don’t make a fool of yourself.

The purpose of this Jquery plug-in is to replace JavaScript’s standard functions alert(), confirm(), and prompt(). This plug-in has

the following features:

1: This plug-in allows you to support your own css formulation. Make your website look more professional.

2: Allows you to customize the title of the dialog box.

3: In IE7, you can avoid page reloading caused by using JavaScript's prompt() function.

4: These methods all simulate Windows modal dialog boxes. When you change the size of the browser window, it can adapt to the adjustment of the user

window.

5: If you introduce the jQuery UI Draggable plugin, this plugin can also be dragged freely.

First, here is the download address of the plug-in for those who need it:

http://labs.abeautifulsite.net/projects/js/jquery/alerts/jquery.alerts -1.1.zip

1: First import the css and js files of JQuery, jquery.ui.draggable
and jquery.alerts in

.

In order to use the alert plug-in correctly in iE, you have to add the DTD to the Page:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Two: Using
we can Use the following ways to use this Jquery plug-in.

jAlert(message, [title, callback])
jConfirm(message, [title, callback])
jPrompt(message, [value, title, callback])
Note: Different For Javascript standard functions, we can use HTML parameters in message to display your prompt information.

Three: Compatibility:
The alert plug-in requires us to use the jQuery package of JQuery1.2.6 or above.

It has been tested to run well on IE6, IE7, FF2, FF3, Safari 3, Chrome, and Opera 9 browsers.

Four: Demo: Note: The dragonable plug-in is introduced in the Demo so it cannot be dragged
Test Alert

Copy code The code is as follows:

jAlert('This is a custom alert box;
This example comes from Breaking Waves Blog',
'Alert Dialog');

Test Confirm

Copy code The code is as follows:

jConfirm('Can you confirm this?

This example comes from Polang Blog',
'Confirmation Dialog', function(r) {
jAlert('Confirmed: ' r, 'Confirmation Results') ;
});

Test Prompt

Copy code The code is as follows:

 
jPrompt('Type something:< 
a href="http://www.cnblogs.com/whitewolf/"> 
This example comes from Breaking Waves Blog' , 
'WhiteWolf', 'Prompt Dialog', function(r) { 
if( r ) alert('You entered ' r); 
}); 

About jConfirm postback solution
I thought about it while I had some time today. I think lastwinter asked this question about the postback issue of ASP.NET. This is mainly because jConfirm is a CallBack callback.
It is asynchronous, not synchronous.
So I tried to prevent the event from bubbling, and when the selection is true, it will automatically post back. Test with LinkButton (Button is different from this solution and will be explained later)
Now post the CODE DEMO of LinkButton:
About jConfirm return DEMO

Copy Code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

LinkButton1 Button Click CODE

复制代码代码如下:

 
protected void Button1_Click(object sender, EventArgs e) 
{ 
this.Label1.Text = DateTime.Now.ToString(); 
} 

主要为先阻止事件的冒泡event.stopPropagation();event.preventDefault(); 在jConfirm的callback回调函数中判断是否需要回传，
<%= Page.ClientScript.GetPostBackClientHyperlink(LinkButton1,"") %>;；
点击LinkButton1是效果为：
Pop-up warning dialog box beautification plug-in based on jQuery (warning, confirmation and prompt)_jquery