0

ブラウザウィンドウの中央に div を配置するスクリプトを作成しましたが、私の問題は次のとおりです。

スクリプトは、コンテンツをロードする前に overlay_window の幅と高さを取得するため、1px x 1px 要素のように div を中央に配置します。この直後にコンテンツをロードしますが、これを防ぐ方法がわかりません。

誰かが私を助けることができますか？

ここにコード：

$(document).ready( function(){      
    $('.cod').click(function() {
        var div_name = $(this).attr('id');      
        $('.overlay_window').load('/templates/' + div_name + '_template.php');
        var div_width = $('#'+div_name+'-overlay').width();
        var div_height = $('#'+div_name+'-overlay').height();
        $('.overlay_window').css("width", ""+div_width+"px")
        $('.overlay_window').css("height", ""+div_height+"px")
        var div2_width = $('.overlay_window').width();
        var div2_height = $('.overlay_window').height();
        var window_width = $(window).width();
        var window_height = $(window).height();         
        var widthoffset = (window_width - div2_width) / 2;  
        var heightoffset = (window_height - div2_height) / 2;   
        $('.overlay_window').css("left", "" + (widthoffset-div_width) + "px");
        $('.overlay_window').css("top", "" + (heightoffset-div_height) + "px");
        $('.overlay_background').fadeIn();
        $('.overlay_window').fadeIn();  
    });
});

およびCSS:

div.overlay_window{
    background:#ffffff;
    width:auto;
    height:auto;
    position:absolute;
    z-index:200;
    top:0;
    left:0;
}
4

2 に答える 2

1

データが.load(url, completed)関数から読み込まれるときにスタイルを変更します。ページをロードするように単純に要求し、ロード中にスタイルを変更します。

$(document).ready( function(){    
    $('.cod').click(function() {
       var div_name = $(this).attr('id');
       $('.overlay_window').load('/templates/' + div_name + '_template.php'**, function(){
          var div_width = $('#'+div_name+'-overlay').width();
          var div_height = $('#'+div_name+'-overlay').height();
          $('.overlay_window').css("width", ""+div_width+"px")
          $('.overlay_window').css("height", ""+div_height+"px")
          var div2_width = $('.overlay_window').width();
          var div2_height = $('.overlay_window').height();
          var window_width = $(window).width();
          var window_height = $(window).height();
          var widthoffset = (window_width - div2_width) / 2;  
          var heightoffset = (window_height - div2_height) / 2;   
          $('.overlay_window').css("left", "" + (widthoffset-div_width) + "px");
          $('.overlay_window').css("top", "" + (heightoffset-div_height) + "px");
          $('.overlay_background, .overlay_window').fadeIn();
       });
    });
    });
于 2012-12-06T18:31:12.037 に答える
0

Click 関数を $(document).ready の外に書いてみてください。それでも機能しない場合は、クリック関数を 

$(#someID).is(:visible){
//your code here
}

id="someID" を div に追加します

うまくいくことを願っています:)

于 2012-12-06T18:35:03.567 に答える