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

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] ボタンです




コードをコピー

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


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

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

推奨