使用 simplemodal（模态）——在 IE 中不能正常工作——模态显示，但背景元素是可点击的；不过可以在 Firefox 中使用
我在这里实现 SimpleModal 时遇到问题 (http://www.ericmmartin.com/projects/simplemodal/ ) 模式窗口的版本。它在像 Firefox 这样的浏览器中可以正常工作，但在 IE 中却不能正常工作——背景元素是可点击的且具有功能性，这不是模态窗口所期望的效果。为什么 IE 不能与 simplemodal 一起正常运行（除了它是 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 中无法正常工作。
I'm having issues here implementing the SimpleModal (http://www.ericmmartin.com/projects/simplemodal/) version of a modal window. It works correctly in a browser like Firefox, but is not working properly in IE -- the background elements are clickable and functional, which is not the desired affect of a modal window. Why is IE not behaving properly with simplemodal (besides that it's IE) and how can I erect a fix?
These are the scripts I'm using:
<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>
Here is the html and code:
<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>
Thank you very much for any help.
Update
I edited the question and summary of my plight. I want to stress that I tested this in Firefox and it works. My concern here is it's not working properly in IE.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在您的示例代码中，您应该正确关闭输入标签并删除第二个输入中的额外冒号。另外，为了检查它是否有效，也许您应该添加简单的模态 CSS 样式，至少对于覆盖层：
还要检查开发人员控制台是否有任何错误。
无论如何，我尝试了你的代码，并且“单击我”按钮被禁用，因为它应该是。
In your example code you should properly close the input tags and remove the extra colon in the second input. Also in order to check if it works maybe you should add the simple modal CSS styles, at least for the overlay:
Also check the developer console for any errors.
Anyway, I tried your code, and the "click me" button is disabled as it should be.
快速浏览一下该插件，我猜想事件冒泡没有得到正确处理：
诚然，我在这里有点超出了我的深度，但据我所知，覆盖层实际上没有任何“需要防止的“默认”行为。需要防止的是事件传播。
尝试将其添加到插件本身的非缩小版本中的preventDefault行上方（您也可以保留preventDefault；没有坏处）：
当然，您必须包含这个非缩小脚本而不是您的脚本目前包括。我很想知道它是否有帮助。很抱歉在没有实际测试的情况下提出“答案”，但设置测试比我希望的要花费更多时间。 ;-)
缺点，如果它确实有效的话：很难找到合适的位置将其放入缩小版本中。使用您选择的工具自己重新缩小整个事情可能会更容易。
[附录：]
如果
e.stopPropagation();不起作用，您可以使用老方法并在
s.close();之后添加Having a quick look at the plugin, I would guess that the event bubbling isn't properly handled:
I'm admittedly a bit out of my depth here, but as far as I can tell, the overlay doesn't actually have any "Default" behaviour that needs to be prevented. What needs to be prevented is event propagation.
Try adding this above the preventDefault line in the non-minified version of the plugin itself (you can just keep preventDefault, too; there's no harm):
Of course, you have to be including this non-minified script rather than the one you're currently including. I'd be curious to know if it helps. Apologies for presenting an "answer" without actually testing it, but it's more time-intensive to set up a test than I'd prefer. ;-)
Downside, if it DOES work: tricky to find the right spot to slip this into the minified version. Might be easier to re-minify the whole thing yourself with the tool of your choice.
[Addendum:]
If the
e.stopPropagation();doesn't work you could go old school and addafter
s.close();我下载了演示并将其分解为骨架部分。事实证明，其中一个 css 文件中的这一行禁用了所有背景元素。
这是 simplemodal 的内部 div，将光标设置为“等待”就是答案。 IE 的版本似乎也没有什么区别。
I downloaded the demo and dissected it to its skeletal parts. It turns out this line in one of the css files disables all background elements.
That's an internal div for simplemodal and setting cursor to 'wait' is the answer. The version of IE did not seem to make a difference, either.