0

ブラウザ ウィンドウの表示可能領域の中央にダイアログ ボックス (read div) を配置する必要があります。これを行うには、javascript DOM を使用する必要があります。scrollHeight、scrollTop、clientHeight などを使用することは許可されています。リンクをクリックするとダイアログボックスが表示される必要があり、それ以外の場合は表示されません。

JQUERY を使用してモーダル ダイアログを作成することはできません。

誰かがこの問題のセンタリングの部分で私を助けてくれますか

よろしく

4

2 に答える 2

1 
(function () {
  var getVieportWidth,
      getViewportHeight;

  if (window.innerWidth) {
    // All browsers except IE
    getViewportWidth = function() { return window.innerWidth; };
    getViewportHeight = function() { return window.innerHeight; };
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    // IE6 with DOCTYPE
    getViewportWidth = function() { return document.documentElement.clientWidth; };
    getViewportHeight = function() { return document.documentElement.clientHeight; };
  }
  else if (document.body.clientWidth) {
    // IE4, IE5, IE6 without DOCTYPE
    getViewportWidth = function() { return document.body.clientWidth; };
    getViewportHeight = function() { return document.body.clientHeight; };
  }

  var dialogDIVNode = document.getElementById('someID'),
      dialogDIVNodeWidth = dialogDIVNode.offsetWidth,
      dialogDIVNodeHeight = dialogDIVNode.offsetHeight;

  document.getElementById('someLinkID').addEventListener('click', function (e) {
    e.preventDefault();

    dialogDIVNode.style.left = ( getViewportWidth() / 2 - dialogDIVNodeWidth / 2 ) + 'px';
    dialogDIVNode.style.top = ( getViewportHeight() / 2 - dialogDIVNodeHeight / 2) + 'px';
    dialogDIVNode.style.display = 'block';
  }, false);
}());
于 2010-11-30T08:45:01.043 に答える
0

ドキュメント内の位置に関係なく、ダイアログ ボックスを正常に中央揃えにする方法を次に示します。

dialogue.style.left = window.innerWidth - (window.innerWidth - dialogue.offsetWidth) / 2 
                      - dialogue.offsetWidth + pageXOffset;

dialogue.style.top = window.innerHeight - (window.innerHeight - dialogue.offsetHeight) / 2 
                     - dialogue.offsetHeight / 2 + pageYOffset;
于 2015-07-25T00:40:33.757 に答える