css – 阻止页面跳转:目标选择器

前端之家收集整理的这篇文章主要介绍了css – 阻止页面跳转:目标选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我使用CSS:target选择器弹出这个模态.但是,单击时页面跳转到锚点.我想阻止页面跳转到:目标选择器.我怎样才能做到这一点?
<a href="#openModal">Info</a>

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

CSS:

.modalDialog {
    position: absolute;
    pointer-events: none;
    z-index: 99999;
opacity:0;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 900px;
    height: 506px;
    position: relative;
    background: rgba(0,0.9);
}

解决方法

使.modalDialog位置:固定而不是绝对.这将使其始终位于页面当前滚动的位置.

一个更完整的例子:http://codepen.io/mblase75/pen/xbRNeV

(在该codepen演示中还有一些其他技巧 – 将另一个目标添加到模态上的’close’按钮,该模式也是固定的,当模态关闭时,页面不会滚动,并且从 – 更改模态的z-index 1到100(或其他一些适当的大整数)将阻止它在你关闭后立即阻止点击.)

猜你在找的CSS相关文章