0

特定のスクリプトに問題があります。実装しようとしている単純なモーダル ウィンドウ スクリプトを見つけました。元の機能は、ウィンドウ div をその「静的」コンテンツで非表示/表示するだけでした。これは素晴らしいことですが、その場でコンテンツを指定できる機能が必要でした。そのため、.load()関数を使用して div のコンテンツを「注入」できるようにすると、スクリプトはウィンドウを通常どおりに表示するようになりました。ただし、モーダルが閉じられると、.empty()を使用して div のコンテンツを空にし、モデル ウィンドウを開くために使用されるリンクの属性の値に応じて、その場でさまざまなコンテンツを追加できるようにしました。

コードをdivのコンテンツにハードコーディングするのではなく、 .load()関数を使用すると、ウィンドウが画面の中央に配置されないことを除いて、すべて正常に機能します。<embed>オブジェクトをハードコーディングすると、<embed>うまく中央に配置され、見栄えがよくなります。

<embed>オブジェクトがその場で div に挿入された場合、ウィンドウ全体の高さ/幅に明らかに矛盾があります。スクリプトがウィンドウ div の合計幅/高さを検索する前後に関数を配置しようと.load()しましたが、何の影響もないようです。

どんな助けでも大歓迎です!!

スクリプトは次のとおりです。

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');
        //Get source file for AJAX request
        var source = $(this).attr('src');

        //If source is set, send ajax request, and then load content into window
        if(source != undefined) {
            $('.window').load(source);
        }

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').fadeOut("slow");
        $('.window').fadeOut("slow", function() {       
            $(this).empty();
        });
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).fadeOut("slow");
        $('.window').fadeOut("slow", function() {
            $(this).empty();
        });
    });         
});
4

1 に答える 1

1

これは、load が AJAX リクエストをトリガーしており、コンテンツが読み込まれる前にセンタリング コードが実行されているためです。あなたがする必要があるのは、モーダルを ajax complete ハンドラーの中央に配置することです。

$('.window').load(source,null,function(){ functionThatCentersModal() });
于 2012-08-23T22:52:30.243 に答える