[英]Make html links under the shadow not clickable
I've inserted a modal in my HTML page. 我在HTML页面中插入了一个模式。 I'd like to make the header links not clickable while the modal is showing (screenshot here: http://prntscr.com/4gyn61 ) 我想在显示模式时使标题链接不可单击(此处为屏幕截图: http : //prntscr.com/4gyn61 )
Here's my css: 这是我的CSS:
.modal {
display: none;
width: 600px;
height: 800px;
z-index: 999 !important; \\I use this to display it over the header.
background: #fff;
padding: 15px 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
box-shadow: inset 0 20px 40px -20px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
And the html of the modal: 和模式的HTML:
<div id="ex1" style="display:none;">
<p class="curr"> <?php include 'mypagewithtext.html'; ?></p>
</div>
Anyone got an idea? 有人知道吗?
EDIT: Only the header. 编辑:只有标题。
I made a simple fiddle to show how to do it : 我做了一个简单的小提琴来展示如何做:
http://jsfiddle.net/o261o9gk/ http://jsfiddle.net/o261o9gk/
My technique is to use a div overlay as shadow : 我的技术是使用div叠加作为阴影:
.overlay{
position:fixed;
top:0;
left:0;
background-color:black;
width:100%;
height:100%;
opacity:0.4;
}
Basicaly, the fixed div get the click instead of the content of your page. 基本上,固定div会获得点击次数,而不是页面内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.