弹出模式不能正常工作

时间:2014-02-09 16:19:04

标签: html css

我正在为我的大学建立一个网站作为一个项目。告诉你我已经免费托管了同样的网站 托管网站。链接http://vivace.net23.net/。现在菜单的非正式部分我想在这里放一个弹出模式是小提琴.. http://jsfiddle.net/karn21/73QXx/

点击我

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

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

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

1 个答案:

答案 0 :(得分:0)

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

新小提琴: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的新小提琴(以及许多其他版本,包括旧版本可支持的任何内容):http://jsfiddle.net/73QXx/3/

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