使用 CSS 禁用 <header> 标签而不隐藏

Question

如何使用 CSS 禁用 <header> 而不隐藏它？ 我没有看到任何可以添加到元素的 disabled 属性。我在标题标签中有一些下拉菜单和按钮。

当我想禁用整个页面时。我使用 JQuery 添加了一个带有类的 div。

<div class="modalOverlay"></div>

CSS 样式是

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    right:0%;
    bottom : 0%;
    background-color: rgba(0, 0, 0, 0.1); /* black semi-transparent */
}

该样式适用于整个页面，但 header 标记中的元素除外。我该如何禁用这些？可能使用 CSS，所以我可以添加一个类并在必要时将其删除。

更新：

<header>
    <nav class="navbar navbar-default">
        <a class="navbar-brand" href="#"> Title </a> <a
            class="toggle-nav btn pull-left" href=""> <i class="icon-reorder"></i>
        </a>
        <ul class="nav">
            <li class="dropdown medium only-icon widget"><a
                class="dropdown-toggle" data-toggle="dropdown" href=""> <i
                    class="icon-rss"></i>
                    <div class="label">1</div>
            </a>
                <ul class="dropdown-menu">
                    <li><a href="">
                            <div class="widget-body">
                                <div class="pull-left icon">
                                    <i class="icon-user text-success"></i>
                                </div>
                                <div class="pull-left text">
                                    New User Added. <small class="text-muted">just now</small>
                                </div>
                            </div>
                    </a></li>
                    <li class="divider"></li>
                    <li class="widget-footer"><a href="">All notifications</a></li>
                </ul></li>
            <li class="dropdown dark user-menu"><a class="dropdown-toggle"
                data-toggle="dropdown" href=""> <img width="23" height="23"
                    alt="userName" src="assets/images/male_icon.png" />
                    <span class="user-name">Hi, Guest</span> <b
                    class="caret"></b>
            </a>
                <ul class="dropdown-menu">
                    <li><a href=""> <i class="icon-user"></i> Profile
                    </a></li>
                    <li><a href=""> <i class="icon-cog"></i> Settings
                    </a></li>
                    <li class="divider"></li>
                    <li><a href="" ng-click="logout()"> <i
                            class="icon-signout"></i> Sign out
                    </a></li>
                </ul></li>
        </ul>
    </nav>
</header>

谢谢。

Answer 1

你可以试试“z-index:99”

.modalOverlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0%;
 left: 0%;
 right:0%;
 bottom : 0%;
 z-index:99;
 background-color: rgba(0, 0, 0, 0.1); /* black semi-transparent */
}

Answer 2

header{
  position: relative;
  z-index: 90;
}

.modalOverlay {
  z-index: 100;
}

Answer 3

您不能禁用 CSS 中的元素，即删除它们在 HTML 中定义或使用 JavaScript 编程的功能。大多数这样做的尝试将影响大多数鼠标操作，而不是基于键盘（或基于语音）的控件和链接使用。

在 HTML 中禁用控件的正确方法是在 HTML 或 JavaScript 中为其设置 disabled 属性或属性。对于链接，您需要删除 href 属性（如果需要，您可以将其值保存到 data-href 属性中，以便可以恢复它）。要对元素内的所有控件和链接执行此操作，您需要一些遍历元素后代的 JavaScript 代码。

Answer 4

您可以使用 pointer-events:none; 在这种情况下文本应该是可见的，但 div 和 evel <a> 中的内容将不起作用。看看 DEMO。

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    right:0%;
    bottom : 0%;
    background-color: rgba(0, 0, 0, 0.1); /* black semi-transparent */
 pointer-events:none; /*This is the KEY*/
}