Implementing a jQuery Modal Window in ASP.NET ...

I’ve recently had several questions about attempts to use the Ajax Control Toolkit’s Modal Dialog, or more accurately, to misuse it, as a window.

It’s a “dialog” and therefore not well suited to being used for receiving data from the user.

Controls like the Modal Dialog Extender Control are convenient when they do when we want them to do but when they don’t there is no reason not to “roll our own” functionality.

In this case I’ve built a sample using jQuery to display a Semi-Modal Window to allow the user to edit a field on the page.

I say “semi” Modal because clicking outside the Window causes the edits to be aborted, the Window to be closed, and the page to be visually restored.

The page normally looks like this…….

Then Clicking on the “Edit Photo Caption” link causes this to happen.

In this dialog one can edit the caption that appears below the photo.

The interesting thing here is that, though I’m using jQuery to display the Window, the rest is plain ASP.NET server controls and code behind.

The “Save” button is an ASP.NET button control which means that there is a Server-Side event handler where I can process they newly entered Photo Caption.

In the case of this demo I just update the page display but we could also use that Click event handler to persist the changed data to a database since it runs server side. (No “services” required.)
 

The Code…

I start with generating a default ASP.NET 4 Web Forms Application with Visual Studio 2010

Then we pull jQuery via a reference in the master page.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 

Note that the new Web Forms project template in Visual Studio 2010 includes versions of jQuery and even one that has IntelliSense support but I’ve opten to dynamically bull the latest version directly from the jQuery code repository.

Next, we have some styles added to the generated Style.css file to handle making the page opaque when we show the Window as well as styles for the Window itself.

 

   1: #mask

   2: {

   3:   position:absolute;

   4:   left:0;

   5:   top:0;

   6:   z-index:9000;

   7:   background-color:grey;

   8:   display:none;

   9: }

  10:  

  11: #boxes .window {

  12:   position:absolute;

  13:   left:0;

  14:   top:0;

  15:   width:440px;

  16:   height:200px;

  17:   display:none;

  18:   z-index:9999;

  19:   padding:20px;

  20: }

  21: 

  22: #boxes #modalwindow {

  23:   width:375px;

  24:   height:203px;

  25:   padding:10px;

  26:   background-color:#ffffff;

  27: }

  28: 

  29: .stylecenter

  30: {

  31:     text-align: center;

  32: }

 

Next we have the code for displaying the Window. Note that this jQuery code is bound ONLY to a DOM <A> Element named “modal”.

Lets look at the code and then I’ll call out a detail or two.

   1:      <script type="text/javascript">

   2:          $(document).ready(function () {

   3:  

   4:              // Set up for displaying modal dialogs

   5:              $(a[name=modal]).click(function (e)

   6:              {

   7:                  // Prevent the default link behavior of navigation so we can
                                                               use the link to show the Window

   8:                  e.preventDefault();

   9:  

  10:                  // Determine which href was clicked if it was in fact an href
                                                               (though this demo as only one.)

  11:                  var id = $(this).attr(href);

  12:  

  13:                  // Determine browser windows dimensions.

  14:                  var maskHeight = $(document).height();

  15:                  var maskWidth = $(window).width();

  16:  

  17:                  // Set dimensions for the mask to opaque the screen when the modal
                                                                        window is displayed.

  18:                  $(#mask).css({ width: maskWidth, height: maskHeight });

  19:  

  20:                  // Make the Window Opaque       

  21:                  $(#mask).fadeIn("fast");

  22:                  $(#mask).fadeTo("slow", 0.8);

  23:  

  24:                  //Get the window height and width

  25:                  var winH = $(window).height();

  26:                  var winW = $(window).width();

  27:  

  28:                  // Set the Modal Window is dimensions to center in the browser window.

  29:                  $(id).css( op, winH / 2 - $(id).height() / 2);

  30:                  $(id).css(left, winW / 2 - $(id).width() / 2);

  31:  

  32:                  // Show the Modal Window

  33:                  $(id).fadeIn("fast");

  34:  

  35:              });

  36:  

  37:              // Handle Close Button Click Event

  38:              $(.window .close).click(function (e) {

  39:                  // Cancel the link behavior

  40:                  e.preventDefault();

  41:  

  42:                  $(#mask).hide();

  43:                  $(.window).hide();

  44:              });

  45:  

  46:              // The user clicks OUTSIDE the Modal Window and the window will be closed without save.

  47:              $(#mask).click(function () {

  48:                  $(this).hide();

  49:                  $(.window).hide();

  50:              });

  51:  

  52:          });

  53:  </script>

We should also note the HTML for the like and the Window to be shown when that like is clicked.

<a href="#modalwindow" name="modal">Edit Photo Caption</a>

</div>

<div id="boxes">

    <div id="modalwindow" class="window">

        <center>Enter New Caption</center><br />

        <asp:TextBox ID="ClientDataTextBox" runat="server" ClientIDMode="Static" TextMode="MultiLine"

                                                           Height="120" Width="370"></asp:TextBox><br />

        <asp:Button ID="ModalButton" runat="server" Text="Save" onclick="ModalButton_Click" />              

    </div>

    <!-- Mask to cover the whole screen -->

    <div id="mask"></div>

</div>

 

Note the line …..

$(a[name=modal]).click(function (e)

“modal” is the name of the <A> object that for opening the Window.
 
Note that the href= is set to the same name as the id of the <DIV> to be displayed when the <A> is clicked and it is that relationship that causes the related Window to be displayed.
 
The cool thing about this is (to me anyway) how I can intermingle ASP.NET and jQuery JavaScript. The fields in the Modal Window get processed in my Code-Behind so I don’t need to write extra JavaScript to fetch and handle the new Photo Caption and I don’t need to write Ajax service Methods to handle Server Side processing of that new data,
 
For me it is this sort of change in style that is indicative of the “new” ASP.NET Web Forms developer.