Geek Answers Handbook

SimpleModal and ASP.NET MasterPage

SimpleModal Integration with ASP.NET and MasterPages

This is a continuation of the previous thread found here .

Thanks to the help I received earlier, the code worked on one page and I was able to use SimpleModal. But my application has MasterPages, so I embedded it in another test form. The results are different from the test I did without MasterPage. Without MasterPage, the modal opened and remained open until closed by the user. With this version of MasterPage, a modal function opens only for one second and then closes. Does anyone know why?

The following is the default sample master page. No changes have been made.

<%@ 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 the webpage.

. jquery , , , .js .

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

MasterPage. . , , noob, jquery.

.

+1
1

, .

HTML- .

ASPX/ , . , contentplaceholder , :

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

, , , ​​... , Chrome. FireFox, IE8 . , , , , button; , -, Chrome , IE8. ( - ).

, . - :

$(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" }
        });
    });
});

, , (e - ). , , - (e.preventDefault();). . ! Chrome IE8, .

, . , , . !

+1

More articles:


All Articles