Monday, June 18, 2012

Simple jQuery Confirm and Alert Dialogs

These days, JQuery is getting more powerful and more useful for rich interactive web application. For myself, I used a lot of JQuery for web interface and ajax pattern. Here, I show you the simple and easy way to use the beautiful jquery Confirm and Alert popup as below.

JQuery confirm popup
First, you need to download the jquery library and resource here (it inclueds images, css and js file.).
Put the following code to <head> tag.
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 function ConfirmPopup() {
   jConfirm('Can you confirm to leave page?', 'Confirmation Message', function (r) {
     if (r) {
       jAlert('Please visit again.', 'Alert Message' , function (r) {
         window.location = 'http://www.aspmemo.net';
       });
     }
   });
}
Create the sever button control like this.
<asp:button id="Button1" onclick="Button1_Click" runat="server" text="Show Confirm">
In that button click event, we register the created javascript function to call.
protected void Button1_Click(object sender, EventArgs e)
{
 Page.ClientScript.RegisterStartupScript(this.GetType(), "popupScript", "ConfirmPopup()", true);
}
That's it. When you clicks the button, it show Confirm popup and then click on Ok button, it show Alert pop and click on OK again, it redirects to one url.

More details bout this JQuery Plugin

No comments:

Post a Comment