Misfit Geek

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

   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's dimensions to center in the browser window.

  29:                  $(id).css('top', 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>

<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>