Question

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

当我想要禁用整个页面时。我使用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 */
}

除了标题标记中的元素外，样式将应用于整个页面。我该如何禁用它们？可能使用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

你可以尝试＆＃34; z-index：99＆＃34;

.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*/
}

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

4 个答案: