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

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" %>

LinkButton

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是效果为：

点击Cancel时候就不会回传，当ok时候就会发生回传更新时间：

对于我们的LinkButton的实现是在输出的客户端Html代码有脚本自动回传，而Button这是HTML元素submit，提交，
所以在这两个的区别下，LinkButton就多了几处javascript 代码：

复制代码 代码如下:

和 input Hidden

复制代码 代码如下:

上面所说的意思就是如果要用Button实现同样的示例，我们必须保证我的输出客户端的代码有这些回传脚本注册，还有就是回传为
<%=Page.ClientScript.GetPostBackEventReference(Button1,"") %>。所以我觉得用LinkButton更适合。