Working with Cookies in Bootstrap Modal. How to make the modal window hide?

Question

PHP

Hello. Created a modal window script that automatically appears on the site page after 3 seconds. I added a checkbox there, which if checked, the modal window should not appear the next time the page is reloaded. That is, by marking the checkbox, we write cookies to the browser for the user. Here is my code: (Please do not pay attention to php code inserts - this is a plugin for cms)

<?php
$this->addJS("templates/default/widgets/besttimer/js/jquery.cookie.min.js");
?>

<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<?= $cont; ?>
</div>
<div class="modal-footer">
<div class="banner-modal-hide" <?php if ($hide) echo 'style="display: none;"';?>>
<input class='modal-check' name='modal-check' type="checkbox"> Больше не показывать это
</div>
<button type="button" class="<?= $buttontype; ?>" data-dismiss="modal"><?= $buttontext; ?></button>
</div>
</div>
</div>
</div>

<style>

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 0 solid #0079f3;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    background: #e1e1e1;
}

</style>

<script>
function explode(){
// $(document).ready(function() {
$("#staticBackdrop").modal('show');
// });
}

setTimeout(explode, <?= $sec; ?>);

</script>

<script type = "text/javascript">

$(document).ready(function(){
    var my_cookie = $.cookie($('.modal-check').attr('name'));
    if (my_cookie && my_cookie == "true") {
        $(this).prop('checked', my_cookie);
        console.log('checked checkbox');
    }
    else{
        $('#myModal').modal('show');
        console.log('uncheck checkbox');
    }

    $(".modal-check").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 1
        });
    });
});

</script>

But, no matter how much I suffer, it does not work out. Maybe there is some gross error in my code? I would appreciate masters with a black belt in javascript.

Answer 1

$(this) is a document, it does not have a checked attribute. You need to check if there is a cookie when loading the page, if not, then show the modal. And hang a handler for the change in the checkbox, if it is selected, then you need to write the cookie.
$(this).prop('checked', my_cookie);

$(document).ready(function(){
    var my_cookie = $.cookie($('.modal-check').attr('name'));
    if (!my_cookie) {
         $('#myModal').modal('show');
    }

    $(".modal-check").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 1
        });
    });
});