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

【问题标题】：Changing Height and width of modal dynamically when browser screen resolution changes当浏览器屏幕分辨率改变时动态改变模式的高度和宽度
【发布时间】：2013-01-12 05:12:15
【问题描述】：

我正在研究一个 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>

实际情况是我试图隐藏我的屏幕并在模式中放置一个广告，直到页面加载。希望我的问题很清楚。提前谢谢你！！

【问题讨论】：

你想在窗口放大缩小时动态改变模态框的width和height？
显然你是对的。
您是否尝试过在调整窗口大小时捕获事件？喜欢$(window).resize(function(){ //Scale the width and height of modal });
没有。我只是在捕捉屏幕的宽度和高度。
screen width 与 window width 不同。屏幕宽度取自显示器分辨率。

标签： javascript jquery html simplemodal

【解决方案1】：

我在jsfiddle 有更新。

我已经添加了这个：

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

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

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

更新：

我已经更新了 jsfiddle here。

希望对你有帮助。

【讨论】：

嘿，真的超级喜欢小提琴。非常感谢您的帮助。
还有一个杜尼尔。当这个模式加载时，我们可以禁用浏览器滚动条吗？
This 可能会有所帮助。

【解决方案2】：

<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', width, height);
            }
        }, 50);
    }());
    $.modal($("#basic-modal-content"));
    $("#simplemodal-container").width(screen.width);
    $("#simplemodal-container").height(screen.height);  
    });

    $(window).on('resolutionchange', function(width, height){
        $("#simplemodal-container").width(width);
        $("#simplemodal-container").height(height); 

       //you also need to set position left:0 and top:0;
    });

    setTimeout(function() { 
    $.modal.close();
    }, 15000);

</script>

但我建议使用这种方式，因为你想填充浏览器窗口

#simplemodal-container {
   left:0;
   top:0;
   width:100%;
   height:100%;
   position:fixed;
} 

<script type="text/javascript">
    setTimeout(function(){
      $('#simplemodal-container').fadeOut();
    },1500);
</script>

或以其他方式[您的解决方案]：

<script>

    $(function() {

       var width = screen.width,
            height = screen.height;

       $.modal($("#basic-modal-content"));
       $("#simplemodal-container").width(width).height(height).css({top:0,left:0});

       $(window).resize(function(){
            width = screen.width;
                height = screen.height;
                $(window).trigger('resolutionchange', width, height);
       });


       $(window).on('resolutionchange', function(width, height){
          $("#simplemodal-container").width(width).height(height).css({top:0,left:0});
          //if you have padding for modal, remove it
       });

       setTimeout(function() { 
          $.modal.close();
       }, 15000);

    });

</script>

【讨论】：