4

わかりました私はこのコードを持っています:

    //When you click on a link with class of poplight and the href starts with  a # 
$('a.poplight[href^=#]').click(function() {
var a = $(this).attr('vd');
var b = $(this).attr('id');

    $.post('chk.php', { name : a, name2 : b }, function(output) {
    $('#con').html(output).show();
});

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURL.split('?');

    var dim= query[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query string value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a     href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');



    //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup

    $('#' + popID).css({ 

        'margin-top' : -popMargTop,

        'margin-left' : -popMargLeft

    });

    //Fade in Background

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 



    return false;

});


//Close Popups and Fade Layer

$('a.close').live('click', function() { //When clicking on the close or fade layer...

    $('#fade , .popup_block, .login').fadeOut(function() {
    $('#fade').remove();

}); //fade them both out



    return false;

});
//end poup

今、ユーザーがpoplightのクラスを持つ要素をクリックするたびに、上記のコードが実行され、popup_blockのクラスを持つdivを表示する必要がありますが、その前にajax関数が呼び出され、問題はありませんが、そのdiv（popup_blockのクラスを持つ）の中心主義が失われるか、そのdivの中心主義を実装するコードがそこにあることがわかりますが、そうではなく、位置を指定したときにのみ中心に置かれていることがわかりますcss または css 上のその div の幅と高さですが、私はそれをしたくありません。jquery 関数がそれを行う必要があります (コードを参照してください。そこに実装されています)。私のコードに不足があるか、何かが欠けているだけかもしれませんが、それが何であれ、私にはわかりません。助けてください、私は電話の際にそのdivを中央に配置したいだけです。よろしくお願いします。

-その div (popup_block のクラスを持つ) は固定配置され、z-index:99999 であり、デフォルトでは何も表示されません。

4

4 に答える 4

2

divの中央に配置するには、ウィンドウを基準にする必要があります。これがあなたがそれをする方法です。

#div中央に配置するボックスを想定

$("#div").css({
    marginTop : ($(window).height() - $(this).height())/2,
    marginLeft : ($(window).width() - $(this).width())/2,
});

absoluteポジションボックスがある場合は、topとleftの代わりにmarginTopとをmarginLeftそれぞれ使用します。

$("#div").css({
    top : ($(window).height() - $(this).height())/2,
    left : ($(window).width() - $(this).width())/2,
});
于 2012-05-06T02:27:11.513 に答える
1

これは役立つかもしれません、

 $.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2  + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2 + "px");
    return this;
}
$('.yourelement').center();
     $( window ).resize(function() {
        $('.yourelement').center();
     });
于 2015-03-19T14:05:52.950 に答える
0

実際にコードを読むことができなかったので、代わりにいくつかの例を設定しました。

固定サイズ要素の絶対センタリング

このスタイルは簡単です。要素の位置を絶対値に設定し、50％/ 50％に押し込み、負のマージンを使用して幅と高さの半分を引き戻します。

jsFiddleの例

動的にサイズ設定された要素の絶対的なセンタリング

これはもっと注意が必要です。Javascriptを画像に取り入れずにこれを行う最良の方法（少なくとも私の意見では）は、テーブルを使用することです。display: tableCSSスタイルを使用すると、ひどいテーブルタグを回避できます。テーブルを使用すると、テーブルセルの内容を垂直方向および水平方向に中央揃えできますが、テーブルは最初にページ全体をカバーする必要があります。

テーブルでは使用できないので、それを行うラッパーをposition: absoluteテーブルに与える必要があります。<div>次に、テーブルの幅と高さを100％に設定して、ビューポート全体をカバーできます。

最後に、CSSスタイルのdivを配置して、親display: inline-block;のスタイルによって水平方向の中央に配置できるようにします。text-alignタダー！そのdivは、何があっても完全に中央に配置されます。

jsFiddleの例

これがお役に立てば幸いです

于 2012-05-06T02:27:47.730 に答える
0

このUsing jQuery to center a DIV on the screen answerで指定されたコードを使用して、ポップアップを中央に配置しましたが、見事に機能しました。and 属性だけでなく、and属性をposition:absolute使用することをお勧めします。topleftmargin-leftmargin-top

于 2012-05-06T02:19:09.577 に答える