1

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

実際には、画面を非表示にして、ページが読み込まれるまでモーダルに広告を表示しようとしています。私の質問が明確であることを願っています。前もって感謝します ！！

4

2 に答える 2

3

ここにjsfiddleの更新があります。

これを追加しました：

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

あなたのスクリプトに。良いことはmodal、ウィンドウが画面全体を占めることです。一方、ウィンドウのサイズを変更すると、境界線 (緑) がなくなり、モーダルの内容のみが表示されます。

しかし、それはあなたにとって良いスタートになるでしょう。

アップデート：

ここで jsfiddle を更新しました。

それが役に立てば幸い。

于 2013-01-12T07:02:39.517 に答える
1 
<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>
于 2013-01-12T07:12:30.747 に答える