ホームページ >ウェブフロントエンド >jsチュートリアル >明確な code_jquery を実現するための jQuery jqmodal ポップアップ ウィンドウ
明確な code_jquery を実現するための jQuery jqmodal ポップアップ ウィンドウ
- WBOYオリジナル
- 2016-05-16 18:25:001334ブラウズ
最初の写真、最終的な効果は次のとおりです
「情報を確認する」をクリック
確認ウィンドウが表示され、入力したすべての情報を確認できます。
情報を入力するのは非常に簡単です。重要なのは、ポップアップ ウィンドウの見栄えを良くすることです。
そこで、jQuery jqmodal 実装を選択しました
実装方法は以下の通りです
1. ページ内の jquery-1.4.2.js と jqModal.js を参照します。jqmodal は jQuery をベースにしているため、jQuery が先頭にある必要があります。
2. jqModal.css を作成し、主にアート関連のものを引用します。div.jqmDialog の表示はありません。高さと幅は、下部をブロックして適切に設定する必要があります。見た目は良好です~~、私は怠惰で、jqmodal の例の CSS を次のように少し変更しました:):
コードをコピーします コードは次のとおりです。 >div.jqDrag {cursor : move;}
/* jqmModal ダイアログ CSS 提供:
Brice Burgess */
div.jqmDialog 🎜>表示: なし;
位置: 固定;
左: 50%;
幅: 900 ピクセル;
overflow: hidden;
font-family:verdana,tahoma,helvetica;
/* 定義を隠すために使用される IE6 の位置エミュレーションを修正しましたIE6 以外のブラウザから
有効な CSS の場合は、代わりに条件付き include を使用してください */
* html div.jqmDialog {
position:Absolute;
top:expression((document.documentElement.scrollTop || document.body.scrollTop) Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) 'px');
}
/* [ [[ タイトル / トップクラス ]]] */
div.jqmdTC {
background: #d5ff84 url(dialog/sprite.gif) stop-x 0px -82px;
color: #528c00; >パディング: 7px 22px 5px 5px;
フォントファミリー: "sans serif",verdana,tahoma,helvetica;
フォントの太さ: 太字
}
div.jqmdTL { 背景: url(dialog/sprite.gif) 繰り返しなし 0px -41px; パディング左: 3px;}
div.jqmdTR { 背景: url(dialog/sprite.gif) 繰り返しなし 0px ; パディング右: 3px ; * ズーム: 1;}
/* [[[ 本文 / メッセージ クラス ]]] */
div.jqmdBC {
background: url(ダイアログ/bc.gif) リピート-x 中央下;
高さ: 630px;
}
div.jqmdBL {background: url(ダイアログ/bl.gif) 繰り返しなし左下: 7px; }
div.jqmdBR {背景: url(dialog/br.gif) 繰り返しなし右下: 7px; : 1 }
div.jqmdMSG { color: #317895; }
/* [[[ ボタンクラス ]]] */
入力.jqmdX {
位置: 絶対;
上: 4px;
高さ: 19px; >background: url(dialog /close.gif) no-repeat 左上;
overflow: hidden;
input.jqmdXFocus {background-position: 左下; }
div.jqmdBC ボタン、div.jqmdBC input[type="submit"] {
マージン: 8px 10px 4px 10px;
背景色: #fff; >cursor: pointer;
}
div.jqmDialog input:focus, div.jqmDialog input.iefocus {background-color: #eaffc3; }
3. Webページのポップアップウィンドウdiv、class="jqmDialog"（CSSに隠れているもの）に注目
4.このdivに表示するものを配置します~~プロセスは省略されています。 :)
5. jquerywin.js を作成して引用します。jqmodal 参照の後に置くように注意してください。理由は同じです~~、コードは次のとおりです:
コードをコピーします
コードは次のとおりです:
$().ready(function() {
$(' #ex3a').jqm({
trigger: '#ex3aTrigger',
overlay: 30 , /* 0-100 (int) : 0 はオフ/透明、100 は不透明 */
overlayClass: 'whiteOverlay'}); Brice Burgess
div.jqmDialog 🎜>表示: なし;
位置: 固定;
左: 50%;
幅: 900 ピクセル;
overflow: hidden;
font-family:verdana,tahoma,helvetica;
/* 定義を隠すために使用される IE6 の位置エミュレーションを修正しましたIE6 以外のブラウザから
有効な CSS の場合は、代わりに条件付き include を使用してください */
* html div.jqmDialog {
position:Absolute;
top:expression((document.documentElement.scrollTop || document.body.scrollTop) Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) 'px');
}
/* [ [[ タイトル / トップクラス ]]] */
div.jqmdTC {
background: #d5ff84 url(dialog/sprite.gif) stop-x 0px -82px;
color: #528c00; >パディング: 7px 22px 5px 5px;
フォントファミリー: "sans serif",verdana,tahoma,helvetica;
フォントの太さ: 太字
}
div.jqmdTL { 背景: url(dialog/sprite.gif) 繰り返しなし 0px -41px; パディング左: 3px;}
div.jqmdTR { 背景: url(dialog/sprite.gif) 繰り返しなし 0px ; パディング右: 3px ; * ズーム: 1;}
/* [[[ 本文 / メッセージ クラス ]]] */
div.jqmdBC {
background: url(ダイアログ/bc.gif) リピート-x 中央下;
高さ: 630px;
}
div.jqmdBL {background: url(ダイアログ/bl.gif) 繰り返しなし左下: 7px; }
div.jqmdBR {背景: url(dialog/br.gif) 繰り返しなし右下: 7px; : 1 }
div.jqmdMSG { color: #317895; }
/* [[[ ボタンクラス ]]] */
入力.jqmdX {
位置: 絶対;
上: 4px;
高さ: 19px; >background: url(dialog /close.gif) no-repeat 左上;
overflow: hidden;
input.jqmdXFocus {background-position: 左下; }
div.jqmdBC ボタン、div.jqmdBC input[type="submit"] {
マージン: 8px 10px 4px 10px;
背景色: #fff; >cursor: pointer;
}
div.jqmDialog input:focus, div.jqmDialog input.iefocus {background-color: #eaffc3; }
3. Webページのポップアップウィンドウdiv、class="jqmDialog"（CSSに隠れているもの）に注目
4.このdivに表示するものを配置します~~プロセスは省略されています。 :)
5. jquerywin.js を作成して引用します。jqmodal 参照の後に置くように注意してください。理由は同じです~~、コードは次のとおりです:
コードをコピーします
コードは次のとおりです:
$().ready(function() {
$(' #ex3a').jqm({
trigger: '#ex3aTrigger',
overlay: 30 , /* 0-100 (int) : 0 はオフ/透明、100 は不透明 */
/* ダイアログをドラッグ可能にし、ハンドルをタイトルに割り当てます。 IE は :hover をサポートしていません。 .jqmdX')
.hover(
function(){ $(this).addClass( 'jqmdXFocus'); },
function(){ $(this).removeClass('jqmdXFocus'); })
.focus(
function(){ this.hideFocus=true; $(this ).addClass('jqmdXFocus'); })
.blur( function(){ $( this).removeClass('jqmdXFocus') });
6. ポップアップ ウィンドウをトリガーできるトリガーが設定されていることに注意してください。メソッドは次のとおりです。
6. ポップアップ ウィンドウをトリガーできるトリガーが設定されていることに注意してください。メソッドは次のとおりです。
コードをコピー コードは次のとおりです。