Modal dialogs are a cornerstone of modern application user interface design and web applications don’t differ from any other type of application UI in this regard.
I did a JavaScript & jQuery Modal Dialogs Roundup a little while back and though I listed a bunch, readers even added a few more. So, there are lots of options.
People seem to get freaked out about making choices. Personally I like the fact that I have so many options and, in the case of Modal Dialogs for web applications, I can pick one that most closely matches the aesthetics and behaviors that I want for my application.
For this post I’m going to use http://fancybox.net/
Which one YOU choose shouldn’t materially change your implementation strategy since, as I hope is starting to become clear, the tricky part in using these sort of jQuery features is the relationship between client side “stuff (HTML Elements, JavaScript, Data, etc.) and the ASP.NET specific things.
Next lets add the jQuery library to our masterpage.
Normally for demo code I use the static librraies that get added to my site directory by VIsual Studio, but in a prodocution wed site you probbaly want to use the Microsoft CDN.
Like this :

<head runat='server'>
    <title></title>
    <link href='~/Styles/Site.css' rel='stylesheet' type='text/css' />
    <script src='http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js'
            type='text/javascript'></script>
    <asp:ContentPlaceHolder ID='HeadContent' runat='server'>
	</asp:ContentPlaceHolder>
</head>

Why use the CDN you say?
  • The CDN has the latest released versions. The Visual Studio template has the version that was current back when Visual Studio 2010 was released.
  • Many ASP.NET sites use jQuery and load from the Microsoft CDN – the files may already be cached for your user.
  • If if the files are not cached it will likely be a bit faster.
  • Take load of YOUR server and reduce your server’s bandwidth.
The page that will display our Modal Dialog pulls in the FancyBox JavaScript and CSS files as well as our own custom JavaScript file that defines the client behavior we desire.
For learning simplicity I’ve previously implemented our custom JavaScript in-line but in practice, it’s better to abstract or JavaScript.
Now that we are getting familiar with the jQuery basics I’ll be trying to use more “best practices” in the demo code as I continue with the jQuery series.

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <link href='Scripts/fancybox/jquery.fancybox-1.3.4.css'
          rel='stylesheet' type='text/css' />
    <script src='Scripts/fancybox/jquery.fancybox-1.3.4.js' 
	        type='text/javascript'>
    </script>
    <script src='Scripts/tos.js' type='text/javascript'></script>
</asp:Content>

Our scenario is that the Modal Popup is a “Terms of Use” dialog.
Here is our page’s markup.


<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <div id='content'>
	<h1>Join Our Community</h1>
	<hr />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
    <hr />
    <br />
    <!-- Modal Dialog -->
    <a id='tos' href='#serviceterms' 
	   title='You must agree with our tems of service.'>
        Click HERE to Agree to our Terms
    </a>
    <div style='display: none;'>
	<div id='serviceterms' style='width:440px;height:250px;overflow:auto;'>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
	Etiam quis mi eu elit tempor facilisis id et neque.
	Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare.
	Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet
	ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum,
	vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue
	laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in.
	Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc
	aliquet tempus sem, id aliquam diam varius ac.
	<br /><br /><hr />
	<input type='button' value='Yes' onclick='ToS_Agree()' />&nbsp;&nbsp;
	<input type='button' value='No' onclick='ToS_NotAgree()' />
	</div>
	    </div>
    <br /><br />

    <asp:Button ID='SubmitButton' runat='server' Text='Submit Form' 
	            Enabled='False'
                ClientIDMode='Static' onclick='SubmitButton_Click' />
        <br /><br />
    <asp:Label ID='LabelResult' runat='server' Text=''></asp:Label>

</div>
</asp:Content>

Note the buttons on lines 39 and 40. We want our Modal Dialog to “actionable” in that the user must click YES to accept the terms of service or NO to reject them.
In order to submit the form the user must accept the terms of service. The submit button declared at line 45 is DISABLED by default to the form can’t be submitted.
When the user clicks on the “YES” button inside the Modal Dialog the button will be enabled.
Let’s look at our custom JavaScript.

$(document).ready(function () {

    $('#tos').fancybox({
    	'titlePosition': 'inside',
    	'modal': 'true',
    	'transitionIn': 'none',
    	'transitionOut': 'none'
    });
});

function ToS_Agree() {
    $('#SubmitButton').removeAttr('disabled');
    $.fancybox.close();
}

function ToS_NotAgree() {
    $('#SubmitButton').attr('disabled', 'disabled');
    $.fancybox.close();
}

We also have a bit of C# Code-Behind that does two things.

  • If the request is a postback leave the Submit button enabled since the user must have accepted the Terms-Of-Service in order to submit the page in the first place.
  • Echo a message back to the user.

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 Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            SubmitButton.Enabled = true;
        }
    }
    protected void SubmitButton_Click(object sender, EventArgs e)
    {
        LabelResult.Text = 'THANKS !!!!!';
    }
}


When we run the page we start with the Submit button Disabled.
When we click on the link to the terms of service we see the Modal Dialog.
If you click on the “No” button then noting happens. If you click on the “Yes” button then the Submit button on the page is now enabled.
Then we can submit the form.
This is what we want, but let’s expand the scenario a bit.
Since we’re working in ASP.NET we might want to include ASP.NET Server Controls in the Markup that appears in the Modal Dialog.
No Problem !
Lets add an ASP.NET TextBox control to our Modal Dialog for the user to type their name into..
Then when we submit the form after accepting the terms of service, lets use the value entered in that ASP.NET control in our Code-Behind.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Page2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            SubmitButton.Enabled = true;
        }
    }
    protected void SubmitButton_Click(object sender, EventArgs e)
    {
        LabelResult.Text = 'Thanks ' + TextBoxInput.Text +
                          ' for agreeing to our Terms of Service!';
    }
}

No problem !

You can download the working source code [ HERE ].