Beautification plug-in based on jquery pop-up warning dialog box (warning, confirmation and prompt)

Source: Internet
Author: User

I recently saw this plug-in on the official website, so I took a look at it today and shared it with you. Maybe you already know

If so, skip this step and do not make a brick.

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

These features are as follows:

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

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

3: In IE7, you can avoid page reloading by using the Javascript prompt () function.

4: these methods simulate the Windows mode dialog box. When you change the browser window size, it can adapt to the user

Window adjustment.

5: if you introduce the jquery UI draggable plugin, the plugin can be freely dragged.

Here we will talk about plug-ins for users who need them to download:

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

I. First, import jquery and jquery. UI. draggable in And jquery. Alerts CSS and JS files.
<SCRIPT src = "/path/to/jquery. js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/path/to/jquery. UI. draggable. js" type = "text/JavaScript"> </SCRIPT>

<SCRIPT src = "/path/to/jquery. Alerts. js" type = "text/JavaScript"> </SCRIPT>

<Link href = "/path/to/jquery.alerts.css" rel = "stylesheet" type = "text/CSS" Media = "screen"/>

To correctly use the alert plug-in IE, you have to add the DTD to the page:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en ""

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

Ii. Use
We can use this jquery Plugin in the following ways.

Jalert (message, [title, callback])
Jconfirm (message, [title, callback])
Jprompt (message, [value, title, callback])
Note: Unlike JavaScript standard functions, we can use HTML parameters in message to display your prompt information.

Iii. compatibility:
The alert plug-in requires that we use jquery1.2.6 or a later jquery package.

It has been tested to run well on IE6, IE7, ff2, ff3, Safari 3, chrome, and opera 9 browsers.

4. Demo: Note: Do you have introduced the dragonable plug-in the demo, so you cannot drag it.
Test alertCopyCodeThe Code is as follows: jalert ('this is a custom alert box;
<A href = \ "http://www.cnblogs.com/whitewolf/\">
This example is from the dashboard </a> ',
'Alert dialog ');

Test confirmCopy codeThe Code is as follows: jconfirm ('Can you confirm this?
<A href = \ "http://www.cnblogs.com/whitewolf/\">
This example is from the dashboard </a> ',
'Confirmation dialog ', function (r ){
Jalert ('confirmed: '+ R, 'confirmation results ');
});

Test promptCopy codeThe Code is as follows: jprompt ('Type something: <
A href = \ "http://www.cnblogs.com/whitewolf/\">
This example is from the dashboard </a> ',
'Whitewolf ', 'prompt dialog', function (r ){
If (r) Alert ('You entered' + r );
});

Jconfirm return Solution
I thought about it today. I think lastwinter should ask this question about ASP. NET's callback. This is mainly because jconfirm is the callback,
It is asynchronous, not synchronous.
So I tried to stop the event from bubbling, and if it is set to true, it will be automatically returned. Test with linkbutton (the button is different from the solution described later)
Now the code demo of linkbutton is pasted:
About jconfirm return demo Copy code The Code is as follows: <% @ page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Scripts src = "script/jquery-1.3.2.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "script/jquery. Alerts-1.1/jquery. Alerts. js" type = "text/JavaScript"> </SCRIPT>
<Link href = "script/jquery. Alerts-1.1/jquery.alerts.css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Asp: linkbutton id = "linkbutton1" runat = "server" onclick = "button1_click"> linkbutton </ASP: linkbutton>
<Asp: Label id = "label1" runat = "server" text = "label"> </ASP: Label>
<Div>
</Div>
</Form>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# <% = Linkbutton1.clientid %>"). Click (function (event ){
Jconfirm ("test", "test jconfirm", function (r ){
If (r ){
<% = Page. clientscript. getpostbackclienthyperlink (linkbutton1, "") %>
}
});
Event. stoppropagation ();
Event. preventdefault ();
});
});
</SCRIPT>
</Body>
</Html>

linkbutton1 button click Code copy Code the code is as follows: protected void button#click (Object sender, eventargs e)
{< br> This. label1.text = datetime. now. tostring ();
}

it mainly blocks event bubbles. stoppropagation (); event. preventdefault (); In the callback function of jconfirm, determine whether a callback is required.
<% = page. clientscript. getpostbackclienthyperlink (linkbutton1, "") % >;;< br> click linkbutton1. The result is:
the result is not returned when you click Cancel, the Update time will be returned when OK occurs:
our linkbutton implementation is to automatically return the HTML code of the output client with a script, the button is an HTML element submit and is submitted.
in the two differences, the linkbutton has several JavaScript codes: copy Code the code is as follows:

And input hiddenCopy codeThe Code is as follows: <input type = "hidden" name = "_ eventtarget" id = "_ eventtarget" value = ""/>
<Input type = "hidden" name = "_ eventargument" id = "_ eventargument" value = ""/>

The above means that if you use a button to implement the same example, we must ensure that the code of my output client has these callback scripts for registration, and that the callback is
<% = Page. clientscript. getpostbackeventreference (button1, "") %>. So I think linkbutton is more suitable.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.