如何解决反馈后不可滚动
我制作了一个按钮，当你点击它时，它会切换一个模式与其他按钮（它是一个选项菜单）。一切正常，我可以滚动模式并切换其中的每个按钮，当我切换模式中的一个按钮时，它会打开另一个模式（如预期的那样），它会给你一些反馈，你也可以正常关闭它而没有任何问题.一旦你关闭了反馈模式，你就不能再滚动下面的模式了......你仍然可以关闭它并点击所有其他按钮，但你不能再滚动它......我不知道出了什么问题......这是代码：（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);
/* Fallback color */
background-color: rgba(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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
