html - 模态不重叠滚动条

Question

问题:

页面上的表格在需要时会溢出。

当我按下“ Assets ”和“添加 Assets ”时，会出现一个模式，我可以在其中添加“ Assets ”。除了表格的滚动条之外，模态与正文上的所有元素重叠。



正如您在输入“GPS 跟踪器 ID”的图像上看到的那样，有一个滚动条。

我正在使用 Materialize modals和 Materialize Table对于这个元素。

问题:

我怎样才能重叠滚动条？

代码:

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    // var options = 
    var instances = M.Dropdown.init(elems, {coverTrigger: false});
  });

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
html, body {
    margin: 0;
    height: 100%;
}
#map{
    height:100%;
    width: 100%;
}
nav{
  background-color:#1A9988 !important; 
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  position: absolute !important;
  bottom: 23px;
  right: 20px;
  width: 200px;
}
#form_btn{
  float: none;
  clear: both;
}

/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  margin-bottom: 0 !important;
}

/* Add styles to the form container */
.form-popup{
  max-width: 400px;
  min-width: 300px;
  width: 25%;
}
/*form box*/
.form-container {
  padding: 20px !important;
  background-color: white;
}
.login{
  color: #1A9988;
  display: inline;
  font-size: 30px;
}
.Sign-up, .Sign-up:visited{
  cursor: pointer;
  font-size: 24px;
  color: #1A9988;
  text-decoration: underline;
  float: none !important;
  clear: both;
}
#form_full{
  background-color: white;  
  width: 100%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  opacity: 0.9;
}
#Sign-up{
  font-size: 25px;
  text-transform: capitalize;
  height: 50px;
  width: 10%;
  position: absolute;
  right: 50%;
  border-radius: 10px;
}
.not-a-user{
  font-size: 24px;
  color: #707070;
}
.Cancel{
  font-size: 35px;
  color: #707070;
}
.Sign-up_Cancel{
  font-size: 35px;
  color: #1A9988;
  text-decoration: underline;
}
#row_link{
  margin-left:  0;
}
.alert {
  position: absolute;
  width: 100%;
  top: 5%;
  padding: 15px;
  background-color: #f44336;
  color: white;
  text-align: center;
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}
#login_alert{
  top: 0;
}
/*table with gps trackers*/
.Assets{
  width: calc(100% - 100px);
  margin: 0px 50px 0px 50px;
}

.link{
  color: #1a9988;
}
.link:hover{
  color:  #0f7567;
}
/*popup add assets style*/
/* The Modal (background) */
.add_assets {
  left: 0;
  top: 10%;
  width: 100%; /* Full width */
  height: 55%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}
#submit{
  font-size: 25px;
  text-transform: capitalize;
  height: 50px;
  width: 20%;
  position: absolute;
  right:30px;
  border-radius: 10px;
}
#Cancel_add{
  font-size: 25px;
  text-transform: capitalize;
  height: 50px;
  width: 20%;
  position: absolute;
  left:30px;
  border-radius: 10px;
  background-color: #f44336;
}
.animate {
  -webkit-animation: animatezoom 5s;
  animation: animatezoom 5s
  background-color: #fefefe;
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
@media only screen and (max-width: 600px) {
  .Assets::-webkit-scrollbar {
    z-index:10;
  }
  /*asset table*/
  .Assets{
    width: 100%;
    margin: 0px 0px 0px 0px;
  }
  /*add asset popup style*/
  .add_assets {
    left: 0;
    top: 10%;
    width: 100%; /* Full width */
    height: 80%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
  }
  #submit, #Cancel_add{
    width: auto;
  }
  .modal-content{
    padding: 0;
  }
  #form_full{
    width: 100%;
    left: 0;
  }
  #Sign-up{
    width: 50%;
    right: 10px;
  }
  .Cancel{
    margin-left: 10px;
  }
  #e-mail, #password, #name , #GPS_ID, #info{
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
  	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  	<link type="text/css" rel="stylesheet" href="./css/materialize.min.css"  media="screen,projection"/>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Home</title>
</head>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a class="modal-trigger" href="#modal1">Add asset</a></li>
</ul>
  <nav>
    <div class="nav-wrapper">
      <ul id="nav-mobile" class="right">
        <li class="active"><a class="dropdown-trigger" href="#!" data-target="dropdown1">Assets<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="?logout=1">Uitloggen</a></li>
      </ul>
    </div> 
  </nav>
<body>
<table class='Assets responsive-table centered highlight'>
  <thead>
    <tr>
      <th>Asset name</th>
      <th>GPS_ID</th>
      <th>Info</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
 <!-- add asset form -->
	<div id="modal1" class="modal add_assets modal2">
	  <div class="modal-content">
	  	<h4>Voeg asset toe</h4>
		  <form class="col s12 animate" action="" method="post">
		   	<div class="row">
				<div class="input-field col s12" id="name">
					<input class="validate" type="text" required name="name">
	          		<label for="Name">Asset name</label>
	          		<span class="helper-text" data-error="Veld mag niet leeg zijn" data-success="correct">Geef de GPS tracker een naam</span>
				</div>
			<div class="row">
				<div class="input-field col s12" id="GPS_ID">
					<input class="validate" type="number" required name="GPS_ID">
	          		<label for="GPS_ID">GPS tracker ID</label>
	          		<span class="helper-text" data-error="Moet een nummer zijn" data-success="correct">Example: 32043123</span>
				</div>
			</div>
			<div class="row">
				<div class="input-field col s12" id="info">
					<input class="validate" type="text" required name="info">
	          		<label for="Info">Other gps info</label>
	          		<span data-error="Veld mag niet leeg zijn" data-success="correct" class="helper-text">Extra info over de GPS</span>
				</div>
			</div>
		     <div class="input-group">
	      		<button id="submit" class="btn waves-effect waves-light" type="submit" name="submit">Add</button>
	    	</div>
	      		<button id="Cancel_add" type="button" class="btn waves-effect waves-light modal-close" >Cancel</button>
	    	</div>
		  </form>
		</div>
	</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</html>

模拟我的问题:

我使用 Firefox 作为浏览器(带有移动模拟器)。
(例如在 Chrome 中你没有这个问题，因为滚动条是自动隐藏的)

将代码片段作为整页打开并打开控制台。

使用 Firefox 移动模拟器缩小屏幕。

按导航栏中的“ Assets ”

在下拉菜单中按“添加 Assets ”

模态将打开，您将看到滚动条与模态重叠。

欢迎提供任何提示/帮助。

先感谢您。

Answer 1

首先非常感谢@Awais为了帮助。

解决方法:

显然，滚动条仅在您在 Firefox 中模拟移动少数时才显示。

当我将代码放在托管上并使用 Firefox 浏览器在我的手机上访问网站时。没有滚动条。