일부 드롭 다운 메뉴가있는 상단에 navbar가 있습니다. 팝업 대화 상자도 있습니다 (alertifyjs 사용). 드롭 다운이 대화 상자 위에있을 수 있기를 바랍니다. 어떻게 할 수 있습니까?
설명하기 위해 JSFiddle 을 만들었습니다 .
HTML
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
자바 스크립트
$(document).ready(function() {
alertify.alert('hello').set('modal', false).set('moveBounded', true);
});
드롭 다운 / 탐색 막대의 CSS에서 Z- 색인을 모달에 설정된 값보다 높은 값으로 설정해야합니다.
nav.navbar-static-top
{
z-index: 9999;
}
난 당신이 게시하고 모달에 Z- 인덱스 설정을 가진 바이올린을 확인 1981소위, z-index의는 9999모달 위에 배치하는 것으로 충분하다.
원하는 결과에 대한 귀하의 의견에 따르면, 안타깝게도 navbar가 구조화 된 방식으로 인해 navbar를 경고 뒤에 두는 쉬운 방법은 없지만 드롭 다운은 경고 위에 있습니다. 따라서 가장 좋은 방법은 전체 navbar가 경고 상단에 머무르는 위에서 제안한 것을 수행하지만 항상 navbar를 지우도록 경고를 구성하는 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다