为了满足以下4个非常简单的要求，必须对下面的代码进行哪些具体更改？
1.页面加载时弹出的模态必须保持可见，除非用户单击“我同意条款”按钮。
1.只有当且仅当用户点击了“我同意条款”按钮时，该模态才会停止出现在整个网站的后续页面加载中。
1.模态应加载在可视屏幕的底部，而不是顶部。
1.用户应该能够向下滚动每一页来阅读每一页，而模态还没有被关闭。这将允许用户，例如，阅读条款，看看什么是网站之前，点击按钮，接受条款和关闭模态。
目前，下面的代码会在每次页面加载时在屏幕顶部显示一个模态。
目前，下面的代码产生了一个模态，只需单击浏览器窗口中的任何地方，而不必单击“我同意条款”按钮，就可以消除该模态。
这个OP正在寻找一种最简单、最少的方法，以最广泛适用的、与浏览器无关的方式来满足这些要求。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Modal Popup Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<section class="content-section">
<p>The page content goes here. But you have to click on the Accept button on the modal in order to get the modal to go away.</p>
</section>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
By using this site, you certify that you agree to our <a href="/terms">Terms of Use</a>.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">I agree to the Terms.</button>
</div>
</div>
</div>
</div>
<script>
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.show()
</script>
</body>
</html>
1条答案
按热度按时间92dk7w1h1#
该模态可以通过简单地在浏览器窗口中单击而不必单击“我同意条款”按钮来消除。
请在modal上添加
data-bs-backdrop="static"。请参见下面代码。只有当且仅当用户点击了“我同意条款”按钮时，该模态才会停止出现在整个网站的后续页面加载中。
您应该使用本地存储来存储状态。
模态应加载在可视屏幕的底部，而不是顶部。
您可以在
<div class="modal-dialog" style="position: fixed;bottom: 0;left: 0;right: 0;">上设计样式全码