13

Matt Berseth の ' YUI Style Yes/No Confirm Dialog ' を変換して、jQuery blockUI プラグインで使用できるようにしようとしています。

私はCSSの第一人者ではないことを認めなければなりませんが、これは私にとっても非常に簡単だと思いました....10時間後を除いて、爆破されたものを機能させることができない理由について途方に暮れています.

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

$.blockUI.defaults.css = {};

.....DIV が左揃えになっていることがわかりました。

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

jQuery/blockUI/CSS ウィザードでこれを読んでいる人がいたら、ぜひ試してみて、私が間違っていることを教えてください。

基本的には Matt のブログのデザイン テンプレートに従い、HTML は次のようになります (CSS は Matt のサンプルから変更されていません)。http://mattberseth2.com/downloads/yui_simpledialog.zipにある完全なサンプル プロジェクトのダウンロードから png の「スプライト」ファイルを取得できます。これは .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 の本を読んでいて、なかなか読む機会がなかったのですが....:)

4

4 に答える 4

8

うーん、blockUI にはあまり詳しくありませんが、div をセンタリングする基本はかなり普遍的です。#confirmDialoguedivを画面全体の中央に配置したいと思いますか?

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

#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は、要素の現在の高さ/幅、およびウィンドウの高さとドキュメントの幅に基づいて計算されます。

于 2008-11-16T23:10:15.023 に答える
3

このjQuery MSG pluginを見てください。非常に軽量で使いやすいです。

サンプルコード

// 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 要素を一元化したい場合は、このプラグインを試すこともできます

于 2011-04-07T10:40:31.190 に答える
2

jquery ui ダイアログを試すこともできますhttp://jqueryui.com/demos/dialog/

于 2010-02-25T12:10:01.080 に答える
2

ここで役立つ情報が見つかるかもしれません。jQuery を使用して DIV を画面の中央に配置する

于 2008-11-17T00:00:40.820 に答える