Question

将SimpleModal与ASP.NET和MasterPages集成

这是前一个找到here的帖子的延续。

感谢我之前收到的帮助，代码在单个页面中工作，我可以使用SimpleModal。但我的应用程序有MasterPages，所以我将其粘贴到另一个测试表单中。结果与我在没有MasterPage的情况下运行的测试不同。没有MasterPage，模态打开并保持打开直到用户关闭。使用此MasterPage版本，模态仅打开一秒钟然后关闭。有谁知道为什么？

以下是默认的样本母版页。没有进行任何编辑。

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

这是来自网页的jquery调用。

注意：这包含与我上面提到的上一篇文章完全相同的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。它也导致了闪烁的模式。不确定为什么因为我在jquery方面是一个完整的菜鸟。

非常感谢任何帮助。

维克多

Answer 1

我想我有一个答案。

上一个示例是一个纯HTML页面，它有一个div或两个输入元素。

但是，将示例移动到ASPX母版页/内容占位符方案会引入一个包装内容的表单元素。呈现页面时，您会在表单元素中看到contentplaceholder，如下所示：

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

因此，当您单击按钮以显示simplemodal对话框时，表单正在提交...至少，它与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" }
        });
    });
});

click handler的函数现在接受一个参数，该参数表示引发事件的元素（e - 按钮）。我接下来要做的第一件事就是阻止按钮点击的默认操作发生（e.preventDefault();）。然后，我继续显示模态。这就是诀窍！我在Chrome和IE8上对此进行了测试，两者都运行良好。

希望这会有所帮助。如果您对此有其他疑问，请告诉我，我会相应更新我的答案。祝你好运!!

SimpleModal和ASP.NET MasterPage

将SimpleModal与ASP.NET和MasterPages集成

1 个答案: