javascript - 当浏览器屏幕分辨率改变时动态改变模式的高度和宽度

Question

我正在研究一个 jquery 简单模式。我正在尝试加载它 - 加载时大约 15 秒后它将自动关闭。所以我无法实现的是，如果我为该模式设置宽度和高度，并且如果用户浏览器屏幕分辨率发生变化([ctrl(+)] 或 [ctrl(-)]) 模式的大小会有所不同。所以我尝试使用 screen.width 和 screen.height 捕捉用户的屏幕分辨率，并将该宽度分配给该模态。但它搞砸了我不知道为什么。 Here is the demo link我正在尝试做的事情。这是我正在使用的 jquery 代码。

<script>
$(document).ready(function() {
    (function () {
    var width = screen.width,
        height = screen.height;
    setInterval(function () {
        if (screen.width !== width || screen.height !== height) {
            width = screen.width;
            height = screen.height;
            $(window).trigger('resolutionchange');
        }
    }, 50);
}());
$.modal($("#basic-modal-content"));
$("#simplemodal-container").width(screen.width);
$("#simplemodal-container").height(screen.height);  
});
setTimeout(function() { 
$.modal.close();
}, 15000);

</script>

实际情况是我试图隐藏我的屏幕并在页面加载之前在模式中放置一个广告。希望我的问题很清楚。在此先感谢您!!

Answer 1

我这里有更新 jsfiddle .

我添加了这个:

modal.css({
  width: w + ($(window).width() - w),
  height: h + ($(window).height() - h)
});

到你的脚本。好消息是 modal 占据了整个屏幕，另一方面，当调整窗口大小时，边框(绿色)将消失，只显示模态的内容。

但这对你来说是一个好的开始。

更新:

我已经更新了 jsfiddle here .

希望对您有所帮助。