Настройте всплывающее окно для мобильных устройств - PullRequest
Новая
       16

Настройте всплывающее окно для мобильных устройств

0 голосов
/ 28 февраля 2019

Я создаю всплывающее окно, которое будет отображаться как для настольных, так и для портативных устройств (телефонов, планшетов и т. Д.).На настольном компьютере / ноутбуке выглядит хорошо, но для портативных устройств всплывающее окно отображается неправильно.Чтобы пользователь мог просматривать всплывающее окно, ему нужно было бы прокрутить вверх или вниз, чтобы всплывающее окно появилось или появилось на экране.

Ниже приведен пример, который я использую для создания модального экземпляра.используя Jquery: 

/*Pop-Up Modal Set UP
========================================*/
var modal = (function(){
    var 
    method = {},
    $overlay,
    $modal,
    $content;

    // Center the modal in the viewport
    method.center = function () {
        var top;
        var left;

        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

        $modal.css({
            top:top + $(window).scrollTop(), 
            left:left + $(window).scrollLeft()
        });
    };

    // Open the modal
    method.open = function (settings) {
        $content.empty().append(settings.content);

        $modal.css({
                width: settings.width || 'auto', 
                height: settings.height || '100%'
        });

        method.center();
        $(window).bind('resize.modal', method.center);
        $modal.show();
        $overlay.show();
    };

    // Generate the HTML and add it to the Modal document
    $overlay = $('<div class="overlay" style="display: none;"></div>');
    $modal = $('<div class="modal" id="myModal"></div>');
    $content = $('<div class="modal-dialog">');

    //Hide the popup
    $modal.hide();
    $overlay.hide();
    $modal.append($content);

    $(document).ready(function(){
        //Add the Overlay and Modal
        $('body').append($overlay, $modal); 
    });

    // Close the modal
    method.close = function () {
        $modal.hide();
        $overlay.hide();
        $content.empty();
        $(window).unbind('resize.modal');
    };

    return method;
}());

Мой вопрос: как я могу изменить модальный режим, чтобы он реагировал, когда он отображается на телефоне или планшетном ПК?

Обновление: Я могу различить, если пользователь подключен к карманному устройству.

Ниже приведен код, который я реализовал: 

var 
method = {},
$overlay,
$modal,
$content,
windowWidth = window.screen.width < window.outerWidth ?
              window.screen.width : window.outerWidth,
mobile = windowWidth < 500,
tablet = windowWidth < 780;

// Center the modal in the viewport
method.center = function () {
    var top;
    var left;

    if(mobile){
        alert("User is on mobile device");
    }

    if(tablet){
        alert("User is on tablet device");
    }

    if(!mobile && !tablet){
        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

        console.log("Top: " + top + " Left: " + left);

        $modal.css({
            top:top + $(window).scrollTop(), 
            left:left + $(window).scrollLeft()
        });
    }
};

Однако, я все еще сталкиваюсь с проблемой всплывающего окна.отображается правильно. Пользователь должен прокрутить вверх до верхней части страницы, чтобы увидеть всплывающее окно, или наоборот.

...