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
After clicking button and performing some server-side processing:
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:
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
Hope this helps,
Stefan.
For more Web Code, ASP.NET, SQL Server and other development tips, please check back here at webcodeblog.com often.
