Bootstrap модальное отображение всплывающих окон один раз в 24 часа - PullRequest
Новая
       97

Bootstrap модальное отображение всплывающих окон один раз в 24 часа

1 голос
/ 28 апреля 2020

Я создал модальное всплывающее окно Bootstrap на сайте SharePoint. У меня всплывающее окно появляется при загрузке страницы. Я также добавил код для set cook ie, чтобы всплывающее окно появлялось только один раз, однако это не работает. Не могли бы вы решить эту проблему? Ниже мой код: 

        <a href="#" type="button" data-toggle="modal" data-target="#myModal"><strong>Read more</strong></a> 

        <div class="modal fade" id="myModal" role="dialog" aria-hidden="true" style="display: none;"> 
        <div class="modal-dialog" style="width: 1000px;"> 
        <div class="modal-content"> 
        <div class="modal-body"> 

        TEXT HERE!

        <div class="modal-footer">
        <button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div> 
        </div>
        </div>
        </div> 
        </div> 

        <script type="text/javascript">
        $(window).on('load',function(){
        $('#myModal').modal('show');
        });
        </script>
        </script>

        <script type="text/javascript">

        $(document).ready(function() {
        if ($.cookie('pop') == null) {
        $('#myModal').modal('show');
        $.cookie('pop', '1');
        }
        });</script>

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Пример тестового демо, вы можете попробовать. 

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript"
        src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript">
    $(function () {
        console.log($.cookie('pop'));
        if (!$.cookie('pop')) {
            $('#exampleModalLong').modal('show');
            $.cookie('pop', '1');
        }
    })

</script>
0 голосов
/ 28 апреля 2020

Когда пользователь посещает сайт, проверьте, существует ли повар ie, если нет, то создайте его на 1 день - 

if (typeof $.cookie('modal_shown') === 'undefined'){ // no cookie

    $('#myModal').modal('show');
    $.cookie('modal_shown', 'yes', { expires: 1 }); // set cookie expiry to 1 day

} else { // have cookie
    // do something
}

Также обязательно включите плагин, который вы ' использовать в вашем коде.

...