使用simplemodal(modal）——在IE中不起作用——modal显示，但背景元素是可点击的;不过在firefo

Using simplemodal (modal) -- Does not work right in IE -- modal displays but background elements are clickable; works in firefox, though

本文关键字：modal firefo 元素 IE simplemodal 不起作用 使用 显示 背景      更新时间：2023-09-26

我在实现SimpleModal时遇到问题(http://www.ericmmartin.com/projects/simplemodal/)模式窗口的版本。它在Firefox这样的浏览器中可以正常工作，但在IE中却不能正常工作——背景元素是可点击的，而且功能强大，这不是模式窗口所希望的效果。为什么IE在simplemode中表现不好(除此之外，它是IE(，我该如何修复？

以下是我正在使用的脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.1.4.1.min.js"></script>

这是html和代码：

<body>
  <div id="Content">
    <a href="http://www.google.com">google</a>
    <input type="button" value="click me" onclick="javascript:alert('should not work');">Hello World
    <input type="button" value="open modal" onclick="javascript:$.modal('<div><h1>Simple Modal</h1></div>');">
  </div>
</body>

非常感谢你的帮助。

更新

我编辑了关于我困境的问题和摘要。我想强调的是，我在Firefox中测试过这一点，它是有效的。我担心的是它在IE中无法正常工作。

在示例代码中，您应该正确地关闭输入标记，并删除第二个输入中多余的冒号。此外，为了检查它是否有效，也许你应该添加简单的模态CSS样式，至少对于覆盖：

#simplemodal-overlay {background-color:#000; cursor:wait;}

还要检查开发人员控制台是否有任何错误。不管怎样，我试过你的代码，"点击我"按钮被禁用了。

快速查看插件后，我猜冒泡事件没有得到正确处理：

// bind the overlay click to the close function, if enabled
if (s.o.modal && s.o.close && s.o.overlayClose) {
  s.d.overlay.bind('click.simplemodal', function (e) {
    e.preventDefault();
    s.close();
  });
}

无可否认，我在这里有点力不从心，但据我所知，覆盖层实际上没有任何需要防止的"默认"行为。需要防止的是事件传播。

尝试将其添加到插件本身的非缩小版本中的preventDefault行上方(您也可以保留preventDefault；没有害处(：

e.stopPropagation();

当然，你必须包含这个未缩小的脚本，而不是你当前包含的脚本。我很想知道它是否有用。很抱歉在没有实际测试的情况下给出了"答案"，但设置测试比我更耗时。；-(

不利的是，如果它确实有效：很难找到合适的位置将其放入缩小版。用自己选择的工具重新缩小整个东西可能会更容易。

【附录：】如果e.stopPropagation();不起作用，你可以老派添加

return false;

s.close(); 之后

我下载了演示并将其分解为骨骼部分。事实证明，其中一个css文件中的这一行禁用了所有背景元素。

#simplemodal-overlay {background-color:#000; cursor:wait;}

这是simplemodal的内部div，将游标设置为"wait"就是答案。IE的版本似乎也没有什么不同。

相关文章：