php - 反馈后无法滚动
问题描述
我制作了一个按钮,当您单击它时,它会与其他按钮切换模式(它是一个选项菜单)。一切正常,我可以滚动模式并切换其中的每个按钮,当我切换模式中的一个按钮时,它会打开另一个模式(如预期的那样),它会给你一些反馈,你也可以正常关闭它而没有任何问题. 关闭反馈模式后,您将无法再滚动下方的模式...您仍然可以关闭它并单击所有其他按钮,但您无法再滚动它...我不知道出了什么问题...这是代码:(html & css,我使用了引导程序)
<style>
/* 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 */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Style buttons */
.btn {
background-color: DodgerBlue;
/* Blue background */
border: none;
/* Remove borders */
color: white;
/* White text */
padding: 12px 16px;
/* Some padding */
font-size: 16px;
/* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard Admin</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="stylenav.css">
<link rel="stylesheet" href="w3.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fa fa-cog"></i> Impostazioni</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Impostazioni</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card border-dark mb-2">
<div class="card-body">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Cambia email</button>
<p>Inserisci la nuova email e ti manderemo un link provvisorio per confermare la tua identità.</p>
</div>
</div>
<div class="card border-dark mb-2">
<div class="card-body text-dark">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Cambia nome utente</button>
<p>Inserisci la tua email e ti manderemo un link provvisorio per confermare la tua identità.</p>
</div>
</div>
<div class="card border-dark mb-2">
<div class="card-body text-dark">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Cambia password</button>
<p>Inserisci la tua email o nome utente e ti manderemo un link provvisorio per confermare la tua identità.</p>
</div>
</div>
<div class="card border-dark mb-2">
<div class="card-body text-dark">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Rimuovi tutti i clienti</button>
<p>Inserisci la tua email per procedere con la conferma.</p>
</div>
</div>
<div class="card border-dark mb-2">
<div class="card-body text-dark">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Elimina tutti gli appuntamenti</button>
<p>Inserisci la tua email per procedere con la conferma.</p>
</div>
</div>
<div class="card border-dark mb-2">
<div class="card-body text-dark">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Elimina l’account</button>
<p>Inserisci la tua email per procedere con la conferma.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" fill="#3bd10d" class="bi bi-check-circle" viewBox="0 0 16 16" style="outline:#3bd10d">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>
<h5>Fatto!</h5>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- sql - 如何在不输入两次公式的情况下将负结果设置为零
- sql - 如何将多个表与不同的列组合起来
- django - 如何使用 django 在 xhtml2pdf 中显示图像和复选框
- mongodb - 在 MongoDB 上通过分片提升性能
- java - 如何仅使用每个类的元素数量进行抽样而不进行替换?
- vb.net - vb.net DataGridView当我按Enter或Tab键时如何留在当前单元格?
- plsql - 通过时间戳差异进行 SQL 连接
- python - Python服务器从所有连接的客户端获取recv,而不仅仅是从第一个连接的客户端
- json - Scala 解析非规范 JSON
- javascript - NextJS getStaticProps 没有将返回的道具传递给页面