1

JQueryを使用してボックスをウィンドウの中央に配置する方法を教えてください。以下のコードを貼り付けます：-

    

    $（ "＃address_book"）。click（function（e）
      {{
          ........。

         ShowDialog（false）;
         e.preventDefault（）;
        .......。
      }）;

    関数ShowDialog（モーダル）{

    ...。  
      $（ "＃overlay"）。show（）;

      $（ "＃dialog"）。fadeIn（300）;

      if（モーダル）
      {{

         $（ "＃overlay"）。unbind（ "click"）;
      }
      そうしないと
      {{
         $（ "＃overlay"）。click（function（e）
         {{
            HideDialog（）;
         }）;
      }
     }

ダイアログボックスをウィンドウの中央に配置したい。誰かがこれを行う方法を教えてもらえますか

4

6 に答える 6

4

以下のコードは jquery ではなく純粋な JavaScript であるため、問題なく動作します。

  var dialog = document.getElementById('dialog')
  dialog.style.top = ((window.innerHeight/2) - (dialog.offsetHeight/2))+'px';
  dialog.style.left = ((window.innerWidth/2) - (dialog.offsetWidth/2))+'px';

jqueryを使用した同じコード

  $('#dialog').css({
      top: ((window.innerHeight/2) - ($('#dialog').height()/2))+'px',
      left:((window.innerWidth/2) - ($('#dialog').width()/2))+'px'
    });

別のアプリケーションでのコードの デモ Demo

注: #dialog にはposition:absolute、その div を配置するために、cssが必要です。

于 2012-11-12T11:53:47.150 に答える
1

jQueryUI ダイアログは、開く前にすべてのコンテンツを配置している限り、自動的に中央に配置されます。

ただし、jQueryUI はダイアログに変換された要素を DOM から削除し、document.body.

于 2012-11-12T11:56:31.547 に答える
0

jQueryでこれを試してください：

$("#dialog").css("margin-top", ($(document.height() - $(this).height())/2);
$("#dialog").css("margin-left", ($(document.width() - $(this).width())/2);

これはうまくいくはずです。

于 2012-11-12T11:57:26.110 に答える
0

css と transform で行うのが最善です..

  1. さまざまなブラウザがすでにダイアログを中央に配置していますが、それでもさまざまな方法で配置されています!
  2. 独自の幅の配置は変換でのみ再計算できます (マージンなどではできません)。
dialog {
    position: absolute;
    left: 50vw;
    top: 50vw;
    transform: translate(-50%, -50%);
    margin: 0; /*reset some browser centering*/
}

そして、何らかの理由で本当にjqueryが必要な場合は、上記のcssを使用して、jQueryでクラスを追加するだけです

于 2021-12-19T13:03:33.427 に答える