jQuery modal dialog with postbacks

JQuery modal dialog with postbacks in ASP.NET:

In this post we take an example for show model popup by using Jquery. As we know that Jquery is fast and reliable. In this post we describe how to show modal popup in asp.net on postback event by help of jquery. For achieving this Jquery task we use two Jquery and some style sheet code. We give simple code here you just copy this code and use.

JQuery Related Other post:

Today most parsons working with the jQuery UI’s Dialog in an ASP.net website or web applications.

JQuery UI modal popup Related question:

Some time on google we search this question in fallowing way, how to open jquery ui dialog in link click and do post back. Or JQuery, UI Dialog PostBack Button Click ASP.NET. Or jQuery UI confirmation dialog and asp.net postback etc.

JQuery UI Dialog:

$('#dialog1').dialog

({

autoOpen: false,

width: 800,

buttons: {}

});

Using jQuery Modal Dialog Confirmation with an ASP.NET:

We use this script with Jquery function

$(function () {

$("#dialog").dialog({

buttons: {

Ok: function () {

$("[id*=Btnclick]").click();

Close: function () {

$(this).dialog('close');

}

});

</script>

jQuery UI Dialog box css:

/*button text element */

.ui-button .ui-button-text { display: block; line-height: 1.4; }

.ui-button-text-only .ui-button-text { padding: .4em 1em; }

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }

.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }

.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }

/* no icon support for input elements, provide padding by default */

input.ui-button { padding: .4em 1em; }

/*button icon element(s) */

.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }

.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }

.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }

.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/

.ui-buttonset { margin-right: 7px; }

.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }

/* workarounds */

button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }

.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }

.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }

.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }

.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }

.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }

.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }

.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }

.ui-draggable .ui-dialog-titlebar { cursor: move; }

jQuery UI ModalDialog Open after ASP.NET Postback:

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

<title>jQuery UI Dialog with ASP.NET button postback</title>

$(function () {

$("#dialog").dialog({

buttons: {

Ok: function () {

$("[id*=Btnclick]").click();

Close: function () {

$(this).dialog('close');

}

});

</script>

</head>

<body>

<br />

<div align="center"> <h1>jQuery modal dialog with post backs in ASP.NET </h1>

<br />

Click on button OK for PostBack!

</div>

<asp:Button ID="Btnclick" runat="server" Text="Button" style = "display:none" OnClick = "Btnclick_Click" />

</div><br />

</form>

</body>

</html>

C#(csharp) code for jQuery UI ModalDialog:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

protected void Btnclick_Click(object sender, EventArgs e)

{

ClientScript.RegisterStartupScript(Page.GetType(), "key", "alert('Button Clicked')", true);

}

JQuery UI Dialog with Asp .NET button postback:

JQuery modal dialog

Search This Blog

Tutorials Place