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

我做了一个简单的小提示来展示如何做到这一点：

http://jsfiddle.net/o261o9gk/

我的技巧是使用div叠加作为阴影：

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

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

使阴影下的html链接无法点击

1 个答案: