jQuery ベースのメッセージ プロンプト プラグイン DivAlert の旅 (2)_jquery

改善されたコード部分は主に次のとおりです。
1.default.css ファイルを作成します:
コード

コードをコピー コードは次のとおりです:

img
{
vertical-align:middle;
}
.jBg
{
position: ABS
上: 0 ;
左: 0;
背景色: #999;
フィルター: アルファ(不透明度=70); 0.7;
}
.jWrap
{
ボーダー: 1px ソリッド #cef;
オーバーフロー: 非表示>}
{
背景:#F1F1F1;
カーソル: 20px; 🎜>vertical-align: middle;
border-bottom:1px ソリッド
text-indent:5px;
line-height:20px; }
.jCon
{
背景色: #fff;
パディング: 10px 13px;
フォントサイズ: 15px; >.jBtn, jBtn: ホバー
{
カーソル:ポインタ;
幅:17px;
}
.jBtn
{
背景:透明な URL(close.png ) 繰り返しなし;
位置:絶対
右:8px;
}
.jBtn:hover
{
背景:透明 URL(閉じる .png) 繰り返しなし -19px 0px;
}
.jConBottom
{
背景:#F1F1F1;
幅:100%;
height:41px;
position:absolute;
}
.jBtnconfirm
{
background:url(btn.png) 繰り返しなし 0 -24px
カーソル:ポインタ;
幅:46ピクセル;
テキスト整列:センター; font-size:12px;
float:right;
margin-right:10px;


2. JS のデフォルト オプション セクション (CSS ファイルと連携するため):




コードをコピー


コードは次のとおりです:


options.bgClass = o.bgClass || 'jBg';
options.wrapClass = o.titClass';
options.conClass = 'jCon';
options.botDivClass = 'jBot'; >options.botBtnClass = o.botBtnClass || ' jBotBtn';


3. 以前はタイトルとコンテンツ用に 2 つの div を作成しただけなので、効果を実現するには 2 つの div を追加する必要があります。 、1 つは下部の大きな div で、もう 1 つは [OK] ボタンです




コードをコピー

コードは次のとおりです:

//下部に [OK] ボタンを含む div を作成します var $conBottomDiv = createElement("div") .addClass('jConBottom') .css('top ', options.height - $titDiv.outerHeight() -40 'px'); // 下部の OK ボタンを作成します

var $conBottomBtn = createElement("div")

.addClass ('jBtnconfirm')
.html('OK')
.click( close);


最後に、これら 2 つの部分を必要な場所に添付することを忘れないでください。 Domが作成されればOKです。 。 。
レンダリング:

装飾しました。以前よりも良くなりました^_^

コード パッケージのダウンロード

jQuery の旅-ベースのポップアップ メッセージ プラグイン DivAlert (1)

jQuery ベースのメッセージ プロンプト プラグイン DivAlert の旅 (2)

JQuery ベースのメッセージ プロンプト プラグイン DivAlert の旅 (3)

推奨