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

Question

我正在做一个jquery简单的模态。我正试图加载它-加载和一些15秒后，它将自动关闭。所以我不能实现的是，如果我设置一个宽度和高度的模态，如果用户的浏览器屏幕分辨率改变([ctrl(+)]或[ctrl(-)])，模态的大小会有所不同。所以我试图抓住用户的屏幕分辨率使用screen.width和screen.height和分配宽度的模式。但我不知道为什么，它是混乱的。这里是我正在尝试做的演示链接。这是我的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。

希望能有所帮助。

Answer 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>