SimpleModal和ASP.NET母版 [英] SimpleModal and ASP.NET MasterPage
问题描述
这是一个一个previous线程的延续中发现的here.
This is a continuation of a previous thread found here.
感谢给了我$ P $帮助pviously的code在一个单一的页面工作，我能够使用SimpleModal。但我的应用程序有MasterPages，所以我粘贴到另一个测试的形式。结果是不同的，然后我跑没有母版测试。如果没有母版的模态开，住打开状态，直到被用户关闭。有了这个母版版本的模式打开了只有一秒钟，然后关闭。任何人都知道为什么吗？
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?
下面是一个默认的样品母版页。没有被编辑做了。
<%@ 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 $ C $从我上面提到的，除了我现在指向本地.js文件的previous后ç的
<%@ 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>
我试着动了声明母版。这也导致了闪烁模式。不知道为什么，因为我是一个完整的noob当涉及到jQuery的。
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.
任何帮助将大大AP preciated。
Any help would be greatly appreciated.
维克托
推荐答案
我觉得我有你一个答案。
I think I have an answer for you.
在previous样本是有一个div一个普通的HTML页面或两个，有些输入元素。
The previous sample was a plain HTML page that had a div or two and some input elements.
然而，样品移动到一个ASPX母版页/内容占位符方案介绍，包裹内容的表单元素。当你的页面呈现，你会看到你的的ContentPlaceHolder 表单元素在里面，像这样：
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>
因此，当你点击按钮显示simplemodal对话框，正在提交表单......至少，它是与Chrome浏览器。我没有测试它的Firefox，但IE8并没有重新提交表单。我假设这是因为这是用来打开对话框按钮是按钮元素;这显然会导致Chrome浏览器表单提交，但不是在IE8。 （这是一个假设 - 我不知道这是肯定）
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.)
解决方法是prevent在按钮单击事件处理点击一个按钮的默认操作。这是非常简单的事情 - 这里的更新code：
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" }
});
});
});
单击处理程序的功能现在只需重新即presents引发该事件的元素的参数（电子 - 按钮）。的第一件事后来我做的是prevent的发生单击按钮的默认操作（电子preventDefault（）; ）。然后，我继续与显示模式。这确实的伎俩！我测试了这个在Chrome和IE8都和正常工作。
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!!
这篇关于SimpleModal和ASP.NET母版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
