SimpleModal和ASP.NET MasterPage

将SimpleModal与ASP.NET和MasterPages集成

这是此处找到的先前线程的延续。

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

下面是默认的示例母版页。 没有进行任何编辑。

这是来自网页的jquery调用。

注意：这包含与我上面提到的上一篇文章完全相同的jquery代码，除了我现在指向本地.js文件。

    #simplemodal-overlay {background-color:#000;} #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}    
 Email: 
 Message: 
 Show 
 
Sample Data
 
Your email was successful!!
 
You can press ESC to close this dialog or click close.
 
 
    $(document).ready(function() { $("#theModal").click(function() { $("#sample").modal({ opacity: 80, overlayCss: { backgroundColor: "#fff" } }); }); });   

我尝试将声明移动到MasterPage。 它也导致了闪烁的模式。 不确定为什么因为我是一个完整的菜鸟，当谈到jquery。

任何帮助将不胜感激。

胜利者

Answer 1

我想我有一个答案。

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

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

因此，当您单击按钮以显示simplemodal对话框时，表单正在提交…至少，它与Chrome一起提交。 我没有在FireFox上测试它，但IE8没有重新提交表单。 我假设这是因为用于打开对话框的button是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处理程序的函数现在接受一个参数，该参数表示引发事件的元素（ e – 按钮）。 我接下来要做的第一件事就是阻止按钮点击的默认操作发生（ e.preventDefault(); ）。 然后，我继续显示模态。 这就是诀窍！ 我在Chrome和IE8上进行了测试，两者都运行良好。

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