调整移动设备的弹出窗口

Question

我正在创建一个弹出窗口，该弹出窗口将同时出现在台式机和手持设备（电话，平板电脑等）上。在台式机/笔记本电脑上看起来不错，但对于手持设备，弹出窗口显示不正确。为了使用户能够查看弹出窗口，他们需要上下滚动才能使弹出窗口重新出现或出现在屏幕上。

以下是我使用的示例，该示例使用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()
        });
    }
};

但是，我仍然遇到弹出窗口显示正确的问题，用户需要向上滚动到页面顶部才能看到弹出窗口，反之亦然。