Javascrip: How do i close a bootstrap modal in using javascript?-CodePudding

I have a modal that pops out after sometime not when i click on a button, but i would like to permently close the modal and set it in a localstorage if that particular user does not want to see the modal again.

This is the code that i have written to try that

<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>

the modal

 <div  style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div  role="document">
            <div >
            <div >
                <h5  style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5>
                <p style="border-top: 1px solid white;"></p>
                <button type="button"  data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% if follow_us.content %}
            <div >
              <p>{{ follow_us.content }}</p>
            </div>
            {% endif %}
            <div >
                
            </div>
            <div >
               
                <a  style="cursor: none;" > Do not show this again.</a>
            </div>
            </div>
        </div>
    </div>

i want to permanently close the modal when a clicks on the Do not show this again button. How do i achieve this?

CodePudding user response：

You can try something like this.

Note: localStorage does not work in the "code snippet" so you have to test the code locally.

$(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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div  style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <h5  style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5>
                <p style="border-top: 1px solid white;"></p>
                <button type="button"  data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% if follow_us.content %}
            <div >
              <p>{{ follow_us.content }}</p>
            </div>
            {% endif %}
            <div >
                
            </div>
            <div >
                <a  style="cursor: none;" > Do not show this again.</a>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

I think you can change it like this

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

but I wonder if you could change the id of modal