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

我正在开发一个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>

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

我在这里有一个更新

我补充说：

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

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

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

更新：

我已经更新了JSFIDLE

希望有帮助。

我这里有一个更新

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

我补充说：

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

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

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

更新：

我已经更新了JSFIDLE

希望能有帮助

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

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

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

---

当窗口被放大和缩小时，您想动态更改模式的宽度和高度吗？显然您是对的。您是否尝试过在调整窗口大小时捕获事件？比如$window.resizefunction{//缩放模态的宽度和高度}；没有。我只是捕获屏幕宽度和高度。屏幕宽度与窗口宽度不同。屏幕宽度取自监视器的分辨率。在放大和缩小窗口时，是否要动态更改模式的宽度和高度？显然，您是对的。您是否尝试过在调整窗口大小时捕获事件？比如$window.resizefunction{//缩放模态的宽度和高度}；没有。我只是捕获屏幕宽度和高度。屏幕宽度与窗口宽度不同。屏幕宽度是根据显示器的分辨率来决定的。嘿，真是太棒了。非常感谢你的帮助，再来一杯。当此模式加载时，我们可以禁用浏览器滚动条吗？也许会有帮助。嘿，真的非常擅长小提琴。非常感谢你的帮助，再来一杯。当此模式加载时，我们可以禁用浏览器滚动条吗？也许会有帮助。