html - 使阴影下的html链接不可点击

Question

我在我的 HTML 页面中插入了一个模式。我想让标题链接在模式显示时不可点击(此处的屏幕截图:http://prntscr.com/4gyn61)

这是我的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;
}

和模态的html:

<div id="ex1" style="display:none;">
    <p class="curr"> <?php include 'mypagewithtext.html'; ?></p>
  </div>

有人知道吗？

编辑:只有标题。

Answer 1

我做了一个简单的 fiddle 来展示如何去做:

http://jsfiddle.net/o261o9gk/

我的技术是使用 div 叠加层作为阴影:

.overlay{
    position:fixed;
    top:0;
    left:0;
    background-color:black;
    width:100%;
    height:100%;
    opacity:0.4;
}

基本上，固定的 div 而不是页面内容获得点击。