Отображать модально только один раз в веб-приложении Asp.Net Core 3 - PullRequest
Новая
       13

Отображать модально только один раз в веб-приложении Asp.Net Core 3

0 голосов
/ 23 октября 2019

Я обновил один из веб-сайтов, на которых я работаю, и у нас есть приветственный модал на главной странице. Я только хочу, чтобы этот модал показывался в течение 60 дней, и только когда кто-то переходит на эту страницу. (очевидно, в настоящее время он отображается при каждом переходе на эту страницу)

Я могу добавить претензию, как только пользователь войдет в систему, чтобы контролировать это, но как это сделать для незарегистрированного основного пользователя?

Модал загружается через окно onload javascript event. Я предполагаю, что проверка даты должна быть сделана там? 

<script>

    $(window).on('load',function(){

        $('#modal-welcome').modal('show');

    });
    //make sure modal is in center of screen
    function alignModal() {
        var modalDialog = $(this).find(".modal-dialog");
        /* Applying the top margin on modal dialog to align it vertically center */
        modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
    }
    // Align modal when it is displayed
    $(".modal").on("shown.bs.modal", alignModal);

    // Align modal when user resize the window
    $(window).on("resize", function () {
        $(".modal:visible").each(alignModal);
    });

</script>

Вот модальный 

<!-- Welcome Modal -->
<div id="modal-welcome" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="block block-themed block-transparent remove-margin-b">
                <div class="block-header bg-primary-dark">
                    <ul class="block-options">
                        <li>
                          <button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
                        </li>
                    </ul>
                    <h3 class="block-title text-center">Welcome to our updated website!</h3>
                </div>
                <div class="block-content">
                    <partial name="_WelcomePartial" />                    
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">Close</button>
                <button id="modal-welcome-agree" class="btn btn-sm btn-primary" type="button" data-dismiss="modal"><i class="fa fa-check"></i>Surf Away!</button>
            </div>
        </div>
    </div>
</div>
<!-- END Terms Modal -->

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Через немного поиска с разными терминами. Теперь есть sessionStorage, который длится весь сеанс просмотра в HTML 5. Это путь. Сценарий прост. 

 <script>
    var today = new Date();
    //put whatever future date you want below
    var showUntil = new Date("2019-12-31");

    if (sessionStorage.getItem("shown") === null) {
        //show only until the end of the year
        if (today < showUntil) {
            $(window).on('load',function(){
                $('#modal-welcome').modal('show');
                sessionStorage.setItem("shown","true");
            });
        }
    }
 </script>
0 голосов
/ 24 октября 2019

Вам нужно было бы найти на странице любые модальности и поставить «если не видно» вокруг каждого события, чтобы оно появилось, примерно так: 

// assuming "modal" is a class that exists on every modal
if (!$(".modal").is(":visible")) {
  // event that makes a modal appear goes here
}

Итак, логика идет, если нетэто модал, уже видимый, сделайте это видимым.

...