モーダルボックス効果、メインディスプレイ3、数×右上の効果は、ボタンと左クリックをキャンセルします。クリックしてプラス非モーダル効果フレーム領域、挿入jsのコードを許可していませんので、この部分は独自のコピーエディタを持つように、実行されますが、以下のいくつかのコードまたは。
ログインフォーム
コードは以下の通りです
<！DOCTYPE HTML>
<HTML>
<HEAD LANG = "EN">
<メタ文字コード= "UTF-8">
<タイトル> </ TITLE>
</ HEAD>
<スタイル> / * フル幅の入力フィールド* /
入力[タイプ =テキスト]、入力[タイプ= パスワード] {
幅：100％ 。
パディング：12ピクセル20ピクセル;
マージン：8px 0 ;
表示：inline- ブロック。
国境：1pxの固体＃1 CCC;
ボックスサイズ：BORDER- ボックス。
} / * すべてのボタンのスタイルを設定します* /
ボタン{
背景 -color： ＃4CAF50。
色：白;
パディング：14px 20ピクセル;
マージン：8px 0 ;
国境：なし;
カーソル：ポインタ;
幅：100％;
}
ボタン：ホバー{
不透明：0.8 。
}
/ * キャンセルボタンのための余分なスタイル* /
。cancelbtn {
幅：オート。
パディング：10pxの18px;
背景 -color： ＃f44336。
}
/ * センター画像と位置閉じるボタン* /
。imgcontainer {
テキスト -align：センター;
マージン：24ピクセル12ピクセル0 0 ;
位置：相対;
}
IMG。アバター{
幅：40％ 。
ボーダー -radius：50％;
}
。コンテナ{
パディング：16pxに。
}
スパン。PSW {
フロート：右。
パディング -top：16pxに;
}
/ * モーダル（バックグラウンド）* /
。モーダル{
表示：なし。/ * デフォルトでは非表示* /
位置：固定; / * 場所に滞在* /
Z -index：1; / * 上に座る* /
左：0 ;
トップ：0 ;
幅：100％; / * 全幅* /
高さ：100％;/ * フルハイト* /
オーバーフロー：自動; / * 必要に応じてスクロールを有効にします* /
背景 -color：RGB（0,0,0）; / * フォールバックカラー* /
背景 -color：RGBA（0,0,0,0.4）。/ * 不透明度/ワットブラック* /
パディング -top：60PX;
}
/ * モーダルコンテンツ/ボックス* /
.modal- コンテンツ{
背景 -color：＃1 fefefe。
利益率：5％、15％、オート自動; / * トップから5％、底から15％中心* /
国境：1pxの固体＃888;
幅：80％; / *は、画面サイズに応じて、より多いまたはより少ないだろう* /
}
/ *閉じるボタン（X）* /
。近い{
位置：絶対。
右：25ピクセル;
トップ：0 ;
色：＃000;
フォントサイズ：35px;
フォント -weight：太字;
}
、ホバー：.close
.close：フォーカス{
色：赤。
カーソル：ポインタ;
}
/ * ズームアニメーションを追加します* /
。{アニメーション
animatezoom 0：-webkit-アニメーション6Sします。
アニメーション：0 animatezoom 6S
}
@ -webkit- キーフレームanimatezoom {
{から：スケール（0 -webkit-変換）}
{に -webkit-変換：スケール（1 ）}
}
@keyframes animatezoom {
変換{から：スケール（0 ）}
に{変換：スケール（1 ）}
}
/ *スパンのスタイルを変更し、余分な小さな画面上のボタンをキャンセルする* /
@media画面と（最大 -width：300ピクセル）{
スパン。PSW {
表示：ブロック;
フロート：なし。
}
。cancelbtn {
幅：100％ 。
}
}
</スタイル>
<body>
<H2>登录表单</ H2>
<ボタンのonclick = "のdocument.getElementById（ 'ID01'）style.display = 'ブロック'。"スタイル= "幅：自動;">登录</ button>の
<divのID = "ID01" クラス = "モーダル">
= "モーダル・コンテンツアニメイト"アクション= "/ action_page.php">
<divのクラス = "imgcontainer">
<！ -点击号×、隐藏模态框- >
<onclickのスパン= "のdocument.getElementById（ 'ID01 '）.style.display ='なし」 " クラス = "近い"タイトル= "閉じるモーダル">＆回; </ span>に
<IMG SRC =" https://static.runoob.com/images/mix/img_avatar。 PNG "ALT = "アバター" クラス = "アバター">
</ div>
<divのクラス = "コンテナ">
<label>は、<B>ユーザー名</ B> </ label>は
<入力タイプ="テキスト」プレースホルダ= 『ユーザ名を入力し、』名前= 『は、uname』が必要>
テキスト」プレースホルダ= "ユーザ名を入力し、"名前= "は、uname"必要な>
<ラベル> <B>パスワード</ b>の</ label>は
の<input type = 『パスワード』プレースホルダ= 『必要なパスワードを入力し、』名前= 『PSW』>
<ボタンタイプ= "提出">登陆</ボタン>
の<input type = "チェックボックス"にチェック= "確認"> 记住我
</ div>
<divのクラス = "コンテナ"スタイル= "背景色：＃1 f1f1f1" >
<！ -点击按钮、把模态框隐藏キャンセル- >
<ボタンタイプ= "ボタン" onclickの= "のdocument.getElementById（ 'ID01'）をstyle.display = 'なし'" クラス = "cancelbtn">キャンセル</ button>の
<スパンクラス = "PSWは"> <aのhref="#">パスワードを忘れた方はこちら</a> </ span>を
</ div>
</ FORM>
</ div>
</ BODY>
</ HTML>
<SCRIPT>
//モデルゲット
VARモーダル=のdocument.getElementById（ 'ID01を'）; //外領域モデルマウスクリックのログオンボックス閉じ
window.onclickを=関数（イベント）{
IF（event.target ==モーダル）{
モーダル。 = style.display "NONE";
}
}
</ SCRIPT>
「、赤、青、緑で示すようにモーダルフレーム（モデル含有量）は、3つのDIVを有します。
