htmlcssbootstrap-modalz-index
How to manage button and modal popup when button set in sidebar and display outside sidebar using position?
I have set button inside sidebar and display half outside sidebar using z-index and set z-index:0 right panel to view button overlay of both div, now when i open modal popup then issue of z-index coming and modal popup display inner of overlay, i am not able to change structure of html sidebar.
How can i display modal popup and sidebar toggle properly with only changes of css?
Issue
What i want?
.sidebar {
position: fixed;
top: 0;
height: 100%;
bottom: 0;
width: 220px;
left: 0;
-webkit-transition: all .5s;
-moz--webkit-transition: all .5s;
-ms--webkit-transition: all .5s;
transition: all .5s;
z-index: 1;
}
.sidebar::after {
display: block;
content: "";
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #2f323a;
}
.sidebar .sidebar-wrapper {
position: relative;
height: calc(100vh - 75px); // overflow-x: hidden;
width: 220px;
z-index: 4;
}
.main-panel {
position: relative;
margin-left: 220px;
background-color: #edeff5;
transition: all .5s;
z-index: 0;
}
.navbar-wrapper {
position: absolute;
right: -15px;
z-index: 99999;
top: 15px;
}
.sidebar .btn-round {
float: left;
height: 35px;
width: 35px;
padding: 0;
font-size: 16px;
position: relative;
line-height: 35px;
border-radius: 30px;
outline: 0 !important;
background-color: #2f323a;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
<div class="sidebar">
<div class="navbar-wrapper">
<button class="btn btn-round">B</button>
<div class="navbar-toggle">
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="clearfix"></div>
</div>
<div class="sidebar-wrapper">
</div>
</div>
<div class="main-panel">
<nav class="navbar">
<div class="navbar-right-wrapper">
<div class="input-group no-border">
<input class="form-control" placeholder="Search..." type="text" value="">
<div class="input-group-text">
<i class="nc-icon nc-zoom-split"></i>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</nav>
<div class="main-content">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>If i remove z-index of main-panel then everything working proper but sidebar toggle not display.
Solution
Remove z-index on .main-panel also change .sidebar z-index:3
.main-panel {
position: relative;
margin-left: 220px;
background-color: #edeff5;
transition: all .5s;
/*z-index:0*/
}
.sidebar {
position: fixed;
top: 0;
height: 100%;
bottom: 0;
width: 220px;
left: 0;
-webkit-transition: all .5s;
transition: all .5s;
z-index: 3;
}
.sidebar::after {
display: block;
content: "";
opacity: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #2f323a;
}
.sidebar .sidebar-wrapper {
position: relative;
height: calc(100vh - 75px); // overflow-x: hidden;
width: 220px;
z-index: 4;
}
.main-panel {
position: relative;
margin-left: 220px;
background-color: #edeff5;
transition: all .5s;
}
.navbar-wrapper {
position: absolute;
right: -15px;
z-index: 99999;
top: 15px;
}
.sidebar .btn-round {
float: left;
height: 35px;
width: 35px;
padding: 0;
font-size: 16px;
position: relative;
line-height: 35px;
border-radius: 30px;
outline: 0 !important;
background-color: #2f323a;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="wrapper">
<div class="sidebar">
<div class="navbar-wrapper">
<button class="btn btn-round">
B
</button>
<div class="navbar-toggle">
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="clearfix"></div>
</div>
<div class="sidebar-wrapper">
</div>
</div>
<div class="main-panel">
<nav class="navbar">
<div class="navbar-right-wrapper">
<div class="input-group no-border">
<input class="form-control" placeholder="Search..." type="text" value="">
<div class="input-group-text">
<i class="nc-icon nc-zoom-split"></i>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</nav>
<div class="main-content">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>