html - 弹出模式无法正常工作

Question

我正在为我的大学制作一个网站作为一个元素。为了向您展示我已经免费托管了相同的网站托管网站。链接http://vivace.net23.net/ .现在在菜单的非正式部分我想在这里放一个弹出模式是 fiddle .. http://jsfiddle.net/karn21/73QXx/ .

点我

   <div id="openModal" class="modalDialog">
<div>

    <a href="#close" title="Close" class="close">X</a>
    </div>
    </div>

但是点击它不起作用。请帮助我

Answer 1

您可以为 Click Me 按钮设置一个 onclick 事件，而不是将其设置为目标，该事件触发 JavaScript 函数以附加 id target 到 div(或另一个类)。然后，将 .modalDialog:target 更改为 .modalDialog.target。然后，只需在单击关闭按钮时删除类即可。

新 fiddle :http://jsfiddle.net/73QXx/2/

这不应干扰您的 hastag 滚动脚本。

此外，如果您仍然希望它显示为链接，您可以添加:

CSS:

a {
    color: #0645AD;
    text-decoration: underline;
    cursor: hand;
    cursor: pointer;
}
a:visited {
    color: #663366;
}

编辑:

此行仅 IE11+ 支持:

pointer-events: none;

您可以使用 HTML IF 添加一个替代方法来检查版本是否为 IE10 或更低版本:

pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This may need to be increased depending
                                      on the elements on the page*/

IE9 的新 Fiddle(以及许多其他版本，包括旧版本可以支持的任何版本):http://jsfiddle.net/73QXx/3/

但是，它的缺点以及为什么不应该将它用于除 IE9 或更低版本(这可以用 HTML IF)以外的任何东西是框突然出现而不是淡入。