模式弹出窗口后面的滑块

我想打开客户details.I模式弹出窗口，我也有一个滑块在网站上，但是当模式打开它后面的滑块，当我滑动页面完成它的完全可见。模式弹出窗口后面的滑块

CSS的弹出：

 /* Full-width input fields */ 
input[type=text], input[type=password] { 
width: 100%; 
padding: 12px 20px; 
margin: 8px 0; 
display: inline-block; 
border: 1px solid #ccc; 
box-sizing: border-box; 
} 

/* Set a style for all buttons */ 
button { 
background-color: #4CAF50; 
color: white; 
padding: 14px 20px; 
margin: 8px 0; 
border: none; 
cursor: pointer; 
width: 100%; 
} 

/* Extra styles for the cancel button */ 
.cancelbtn { 
padding: 14px 20px; 
background-color: #f44336; 
} 

/* Float cancel and signup buttons and add an equal width */ 
.cancelbtn,.signupbtn {float:left;width:50%} 

/* Add padding to container elements */ 
.container { 
padding: 16px; 
} 

/* The Modal (background) */ 
.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
padding-top: 60px; 
} 

/* Modal Content/Box */ 
.modal-content { 
background-color: #fefefe; 
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ 
border: 1px solid #888; 
width: 80%; /* Could be more or less, depending on screen size */ 
} 

/* The Close Button (x) */ 
.close { 
position: absolute; 
right: 35px; 
top: 15px; 
color: #000; 
font-size: 40px; 
font-weight: bold; 
} 

.close:hover, 
.close:focus { 
color: red; 
cursor: pointer; 
} 

/* Clear floats */ 
.clearfix::after { 
content: ""; 
clear: both; 
display: table; 
} 

/* Change styles for cancel button and signup button on extra small screens */ 
@media screen and (max-width: 300px) { 
.cancelbtn, .signupbtn { 
    width: 100%; 
    } 
}

和HTML的弹出：

 <div id="id01" class="modal"> 
    <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> 
<form class="modal-content animate" action="/action_page.php"> 
<div class="container"> 
    <label><b>Email</b></label> 
    <input type="text" placeholder="Enter Email" name="email" required> 

    <label><b>Password</b></label> 
    <input type="password" placeholder="Enter Password" name="psw" required> 

    <label><b>Repeat Password</b></label> 
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required> 
    <input type="checkbox" checked="checked"> Remember me 
    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> 

    <div class="clearfix"> 
    <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> 
    <button type="submit" class="signupbtn">Sign Up</button> 
    </div> 
</div>

由于读取弹出应该只是前/身体标签所以试过，但没有工作如果您需要任何其他信息，请让我知道。

来源

2017-08-24 mark

请提供一个工作提琴。这似乎是一个'z-索引'问题。 – Huelfe

增加模态上的z-index值，直到模态显示在滑块上方。

来源

2017-08-24 11:48:20

观察到的CSS属性在下面的示例：

.slider{ 
 
    background-color:red; 
 
    height:300px; 
 
    position:relative; 
 
    z-index:9; 
 
} 
 
.pop{ 
 
    background-color:skyblue; 
 
    position:absolute; 
 
    height:200px; 
 
    width:400px; 
 
    top: 15%; 
 
    left: 5%; 
 
    z-index:9999; 
 
}

<div class='slider'>Slider</div> 
 
<div class='pop'>popup</div>

来源

2017-08-24 11:50:43

模式弹出窗口后面的滑块

回答

相关问题