Stefan Zvonar

A collection of articles about software development, data analysis and other technical tidbits

Create a simple jQuery overlay popup after performing a server-side postback

Posted by Stefan Zvonar on May 21, 2010

In this example, I am going to show how to create a simple jQuery popup overlay after performing a server-side postback.  This will be done just by clicking a simple button.

Before clicking button:

Before clicking button

Before clicking button

After clicking button and performing some server-side processing:

After clicking button

After clicking button

Creating the HTML

Include jQuery libraries:

Link to the standard jQuery library and the jQuery Tools library.  In this example, I link to jQuery in the header of my HTML.

Overlay popup:

You will want to style your popup overlay, so in this example I am just going to create a style class in the header of my HTML called “overlay”.  This style is used to dress the popup div called “divPopUp”.  Initially this div is not displayed.

Button control:

Create a button control (or other control) that you want to use to contact the server.  This is where the server-side processing will occur and eventually create the popup overlay.

Here is my complete HTML:

<html>
    <head>
        <title></title>
        <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script src="scripts/jquery.tools.min.js" type="text/javascript"></script>
        <style type="text/css">

         .overlay
         {
             background-color:#fff;
             display:none;
             width:350px;
             padding:15px;
             text-align:left;
             border:3px solid #333;
             -moz-border-radius:6px;
             -webkit-border-radius:6px;
             -moz-box-shadow: 0 0 50px #ccc;
             -webkit-box-shadow: 0 0 50px #ccc;
          }
         </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="btnDoStuff "runat="server" Text="Do Stuff"/>
            </div>
            <div class="overlay" id="divPopUp "style="width:450px">
                <h3>Hello</h3>
                <p> Do you like my pop up? </p>
                <button>Close</button>
            </div>
        </form>
     </body>
 </html>

Implementing the server-side code

On the page code-behind, implement the event handler for the button click. Here write whatever it is that is necessary on the server post-back and then register some new jQuery to be run once the page document is loaded and ready to run, as shown below:

Partial Class Popup
    Inherits System.Web.UI.Page

    Protected Sub btnDoStuff_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnDoStuff.Click
        ' Do whatever other server-side code you want done here

        ' Now show the popup overlay
        ShowPopUpOverlay()
    End Sub

    Private Sub ShowPopUpOverlay()
        'Create the client script
        Dim sbOverlay As New StringBuilder()
        sbOverlay.Append("$(document).ready(function()" & vbCrLf)
        sbOverlay.Append("{" & vbCrLf)
        sbOverlay.Append("$(""#divPopUp"").overlay({" & vbCrLf)
        sbOverlay.Append("// custom top position" & vbCrLf)
        sbOverlay.Append("top: 272," & vbCrLf)
        sbOverlay.Append("expose: {" & vbCrLf)
        sbOverlay.Append("Color: ‘#999′," & vbCrLf)
        sbOverlay.Append("loadSpeed: 200," & vbCrLf)
        sbOverlay.Append("// highly transparent" & vbCrLf)
        sbOverlay.Append("opacity: 0.5" & vbCrLf)
        sbOverlay.Append("}," & vbCrLf)
        sbOverlay.Append("closeOnClick: false," & vbCrLf)
        sbOverlay.Append("api: true" & vbCrLf)
        sbOverlay.Append("// load it immediately after the construction" & vbCrLf)
        sbOverlay.Append("}).load();" & vbCrLf)
        sbOverlay.Append("});" & vbCrLf)

        ClientScript.RegisterClientScriptBlock(GetType(Page), Guid.NewGuid().ToString(), sbOverlay.ToString(), True)
    End Sub

End Class

Hope this helps,

Stefan.

-
stefanzvonar.com – A collection of articles on computer programming, software development, data analysis and other technical tidbits.
-

About these ads

One Response to “Create a simple jQuery overlay popup after performing a server-side postback”

  1. maulik said

    its not working……

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: