jQueryとblockUIを使用してページの中心にDIVを取得するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/294502

質問

Matt Bersethの ' YUI Style Yes / Noの確認ダイアログ 'なので、jQuery blockUIプラグインで使用できます。

私はCSSの第一人者ではないことを認めなければなりませんが、私にとってもこれは非常に簡単だと思いました。

問題は、「confirmDialogue」DIVをページの中央に配置して、その上にいくつかのアーティファクトが表示されないように見えることです。または、blockUIのCSS設定をリセットして…。:: 

$.blockUI.defaults.css = {};

..... DIVが左に揃うことがわかりました。

あらゆる種類のことを試しましたが、CSSはサーバー側のアプリであるという強みではありません：（

だから、これを読んでいるjQuery / blockUI / CSSウィザードを持っている人がいたら...行って、何がおかしいのか教えてください。

基本的には、Mattのブログのデザインテンプレートに従いましたが、HTMLは次のようになります（CSSはMattのサンプルから変更されていません）。 http://mattberseth2.com/でダウンロードした完全なサンプルプロジェクトからpng「スプライト」ファイルを取得できます。 downloads / yui_simpledialog.zip -これは.netプロジェクトですが、これを単純なhtmlファイルで機能させようとしているので、.NETの知識は不要です。

とにかくアドバイスやガイダンスは本当に本当に役立つでしょう。私たちが会ったらビールのラッシングを購入することを約束するものを買うことさえ奨励します：）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title></title>
  <script type="text/javascript" src="script/jquery-1.2.6.js"></script>
  <script type="text/javascript" src="script/jquery.blockUI.js"></script>
  <style>
  .modalpopup
  {
    font-family: arial,helvetica,clean,sans-serif;
    font-size: small;
    padding: 2px 3px;
    display: block;
    position: absolute;
  }

  .container
  {
    width: 300px;
    border: solid 1px #808080;
    border-width: 1px 0px;
  } 

  .header
  {
    background: url(img/sprite.png) repeat-x 0px -200px;  
    color: #000;  
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 3px 10px;
  } 

  .header .msg
  {
    font-weight: bold;
  }         

  .body
  {
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 30px;
  } 

  .body .msg
  {
    background: url(img/sprite.png) no-repeat 0px -1150px;  
    float: left;
    padding-left: 22px;
  }  

  .footer
  {
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: none solid;
    border-width: 0px 1px;
    text-align:right;
    padding-bottom: 8px;
    padding-right: 8px;
  } 

  .close
  {
    right: 7px;  
    background: url(img/sprite.png) no-repeat 0px -300px;  
    width: 25px;  
    cursor: pointer;  
    position: absolute;  
    top: 7px;  
    height: 15px;
  }

  .modalBackground 
  {
    background-color:Gray;
    filter:alpha(opacity=50);
    opacity:0.5;
  }     

  </style>
</head>

<body>

<input id="triggerDialogue" name="triggerDialogue" type="button" value="Go" />

<div id="confirmDialogue" 
     class="modalpopup" style="display:none; text-align: center">
  <div class="container">
    <div class="header">
      <span class="msg">Are you sure?</span>
      <a onclick="return false;" class="close" 
         href="javascript: return false;"></a>
    </div>
    <div class="body">
      <span class="msg">Do you want to continue?</span>
    </div>
    <div class="footer">
      <input type="button" id="Button1" value="Yes" style="width:40px" />
      <input type="button" id="Button2" value="No" style="width:40px" />   
    </div>                                                
  </div>
</div>   

<script type="text/javascript">
  $(document).ready(function() {
    $('#triggerDialogue').click(function() {
      $.blockUI({ message: $('#confirmDialogue') });
    });
  });
</script>
</body>
</html>

@Owen-それに感謝します。 Mattのスタイルシートの.modalPopup CSSクラスを次のように簡単に変更する必要がありました。

position: fixed;

....そしてそれは動作します。とても有難い。 O'Reilly CSS book に座って、読む機会がまったくない夜....：）

役に立ちましたか？

解決

うーん、私はblockUIに精通していませんが、divを中央揃えする基本はかなり普遍的です。 #confirmDialogue divを画面全体の中央に配置することを想定していますか？

もしそうなら、あなたはいくつかのことをしたい：

#confirmDialogue {
    position: fixed;    // absolutely position this element on the page
    height: 200px;      // define your height/width so we can calculate with it after
    width: 300px;
}

jQueryを今：

$('#triggerDialogue').click(function() {
    // to position #confirmDialogue, we need the window height/width
    var msg = $('#confirmDialogue');
    var height = $(window).height();
    var width = $(document).width();

    msg.css({
        'left' : width/2 - (msg.width() / 2),  // half width - half element width
        'top' : height/2 - (msg.height() / 2), // similar
        'z-index' : 15,                        // make sure element is on top
    });

    // etc...
});

基本的に、あなたは #confirmDialogue の位置を修正したいので（ウィンドウ/ドキュメントのサイズに対して相対的に配置できるように。 left および top 宣言は、要素の現在の高さ/幅、およびウィンドウの高さとドキュメントの幅に基づいて計算されます。

他のヒント

この jQuery MSGプラグイン。非常に軽量で使いやすいです。

サンプルコード

// default usage, this will block the screen and shows a 'please wait...' msg
$.msg();

// this will show a 'blah blah' msg
$.msg({ content : 'blah blah' });

その他のオプションはこちらをご覧くださいデモ

完全なドキュメントは、この投稿をご覧ください。 。ダウンロードとソースコードのリンクは投稿に含まれています。

または、DOM要素を集中化する場合は、プラグイン

ここで役立つ情報を見つけることができます。 jQueryを使用してセンタリングする画面上のDIV

所属していません StackOverflow
scroll top