Javascrip:如何使用javascript关闭引导模式

Question

我有一个模式，它会在某个时间后弹出，而不是在我点击按钮时弹出，但如果特定用户不想再次看到该模式，我想永久关闭该模式并将其设置在本地存储中。

这是我为尝试而写的代码

<script>
$(function() {
const showModal = localStorage.getItem("modal") === null;
$(".modal").toggleClass("d-none")
$(".modal_close").on("click",function() {
localStorage.setItem("modal","seen");
$(this).closest(".modal").addClass("d-none")
});
})    
</script>

模态

<div class="modal  fade" style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog  modal-dialog-centered" role="document">
<div class="modal-content animate-grad text-white">
<div class="modal-header text-center">
<h5 class="modal-title " style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5>
<p style="border-top: 1px solid white;"></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{% if follow_us.content %}
<div class="modal-body">
<p>{{ follow_us.content }}</p>
</div>
{% endif %}
<div class="d-flex text-white">

</div>
<div class="modal-footer w-100">

<a  style="cursor: none;" class="modal_close close"> Do not show this again.</a>
</div>
</div>
</div>
</div>

当点击时，我想永久关闭模态。不要再显示这个按钮。我该如何做到这一点？

Answer 1

您可以尝试这样的方法。

注意：localStorage在"；代码片段"；所以您必须在本地测试代码。

$(document).ready(function(){
if( !localStorage.getItem("modal-seen") ){
setTimeout(() => $('#exampleModal').modal('show'), 1000); // wait a sec before showing modal
$('.modal_close').click(function(){
localStorage.setItem("modal-seen", true);
$('#exampleModal').modal('hide');
})
}
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div class="modal fade" style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog  modal-dialog-centered" role="document">
<div class="modal-content animate-grad text-white">
<div class="modal-header text-center">
<h5 class="modal-title " style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5>
<p style="border-top: 1px solid white;"></p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
{% if follow_us.content %}
<div class="modal-body">
<p>{{ follow_us.content }}</p>
</div>
{% endif %}
<div class="d-flex text-white">

</div>
<div class="modal-footer w-100">
<a  style="cursor: none;" class="modal_close close"> Do not show this again.</a>
</div>
</div>
</div>
</div>

Answer 2

我想你可以像这个一样更改它

const showModal = localStorage.getItem("modal") === null;
$(".modal").modal("show")
$(".modal_close").on("click",function() {
localStorage.setItem("modal","seen")
$(this).closest(".modal").modal('hide')
});  

但我想知道你是否可以更改模式的id