SimpleModal and ASP.NET MasterPage

Integrating SimpleModal with ASP.NET and MasterPages

This is a continuation of a previous thread found here.

Thanks to the help I received previously the code worked in a single page and I was able to use SimpleModal. But my application has MasterPages, so I pasted it into another test form. The results are different then the test I ran without a MasterPage. Without the MasterPage the modal opened and stayed open until closed by the user. With this MasterPage version the modal opens for only one second and then closes. Anybody know why?

Below is a default sample master page. No edits were done.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Test.master.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

And here is the jquery call from web page.

Note: this contains exactly the same jquery code from the previous post I mentioned above except I am now pointing to local .js files.

<%@ Page Title="" Language="C#" MasterPageFile="~/test.master" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        #simplemodal-overlay {background-color:#000;}
        #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div>
        Email: <input type="text" id="email" /><br />
        Message: <input type="text" id="message" /><br />
        <button id='theModal'>Show</button>
        <div id="sample" style="display:none"> 
            <h2>Sample Data</h2> 
            <p>Your email was successful!!</p> 
            <p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p> 
        </div> 
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.simplemodal.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#theModal").click(function() {
          $("#sample").modal({
            opacity: 80,
            overlayCss: { backgroundColor: "#fff" }
          });
        });
      });
    </script>
</asp:Content>

I tried moving the declarations to the MasterPage. It also resulted in a flashing modal. Not sure why as I am a complete noob when it comes to jquery.

Any help would be greatly appreciated.

Victor

I think I have an answer for you.

The previous sample was a plain HTML page that had a div or two and some input elements.

However, moving the sample to an ASPX master page / content placeholder scheme introduced a form element that wrapped the content. When your page is rendered, you'll see your contentplaceholder inside a form element, like so:

<form method="post" action="test2.aspx" id="form1">
<!-- your content is contained here -->
</form>

As a result, when you clicked the button to show the simplemodal dialog, the form was being submitted...at least, it was with Chrome. I didn't test it on FireFox, but IE8 was not re-submitting the form. I'm assuming this is because the button that's being used to open the dialog is a button element; this apparently causes a form in Chrome to submit, but not in IE8. (That's an assumption -- I don't know that for sure.)

The fix is to prevent the default action of a button click in the button click event handler. It's very simple to do - here's the updated code:

$(document).ready(function () {
    $("#theModal").click(function (e) {  //e = the element that raised the event (button)
        e.preventDefault();  //prevent the default action of the button click
        $("#sample").modal({
            opacity: 80,
            overlayCss: { backgroundColor: "#fff" }
        });
    });
});

The click handler's function now takes an argument that represents the element that raised the event (e -- the button). The first thing I then do is to prevent the default action of the button click from happening (e.preventDefault();). Then, I continue on with displaying the modal. This does the trick! I tested this on Chrome and IE8 and both worked fine.

Hopefully this helps. Let me know if you have other questions about this and I'll update my answer accordingly. Good luck!!