まず、HTMLで
<DIV CLASS = "バックキャップ">
<DIV CLASS = "diolag">
<DIV CLASS = "diolag-DIV">
<IMGクラス= "diolagアイコン" SRC = "{{basePathを}} / IMG /溶液/アプリ/ close.png ">
<DIV CLASS =" IMG ">
<IMG />
</ div>
<h3のクラス=" diolagタイトル"> </ H3>
<Pクラス=" diolag-コンテンツ"> </ P>
<ボタンタイプ= "ボタン"クラス= "diolag-近い">确定</ボタン>
</ div>
</ div>
</ div>
スクリプトタグで
$（「バックキャップ」）。隠す（）
//、ページ全体が暗い1時の弾性ブロックとなるそれぞれ
設け.backcap //クラス名表示素子、以下CSSスタイル
のvar切戻=関数（）{
$（ "。バックキャップ"）。ショーは、（）
}
//クラス名は、要素が表示されていない以下のCSSスタイル.backcap提供
するvar changeCome =関数（）{
$（"バックキャップ「）。隠す（）
}
//設定私は.diolagポップボックスが消え
$（」。diolag "）。 （非表示）
// X-クリックし、ポップアップボックスの右側を.diolag設定した後が消え
$を（。 "diolag .diolagアイコン"）。クリック（関数（）{
$（" .diolag "）。隠す（）
changeCome（）
}）
//下のボタンをクリックし.diolag設定した後、ポップアップボックスが消え
$（"。diolag .diolagクローズ ）」。（（機能をクリックしてください）{
$（"。diolag「）。非表示（）
changeCome（）
}）
//私は定期的に確認するために、.submit時間をクリックすると
$を（。「送信」）。クリックして（関数（）{
//されているデータの電話番号を取得
LET contentData = $（「＃コンテンツを」）。ヴァル（）
LET = $ mobileData（ "モバイル＃"）。ヴァル（）
LET =新しい新patt1正規表現（ "\\。1 D ^ {10} $"）
//取得したページの高さメソッド
VARのgetHeight =機能（）{
_width =文書ましょう。 documentElement.clientWidth; //ワイドスクリーン
_height = document.documentElement.clientHeightせ; //画面が
= 580 boxWidthをさせ; //がので、通常のダイを書くべきではありません私はここで亡くなった記述する必要が
boxHeight = 330を聞かせ; //は、通常の死を書くべきではありません、私が原因死んニーズにここに書きました
console.log //（boxWidth、_width、_height）
$ショー（）;.（ "Diolag"。）
$（ "Diolag .diolag-DIV。"）CSS（{。
"左"：（_width - boxWidth）/ 2 `px`の+、
"トップ"（_height - boxHeight）/ 2 +` px`
}）
}
//誤った情報
のvar getFail =関数（）{
切戻（）
はconsole.log（ '間違った電話番号です'）
//これは間違って電話で
$（ 'diolag .diolagタイトル '）テキスト（ " ！コミット失敗"）、CSS（{ "フォント .. "18px"、 "色"：：-size" "＃の3b426b"、 「フォントの太」：「400 」}）
$（）ATTR（ "SRC"、 "{{basePathを}} / IMG /溶液/アプリ/ fail.png"） 'diolag .IMG IMG'。
$（ 'Diolag .diolag-コンテンツ'）。テキスト（「上司は、あなたの電話番号を記入！エラー、正常に終了し、それを確認して提出してください「）CSS（{。
」フォントサイズ「：」14px「
『カラー『：』＃1 7d88a2』、
『行の高さ『：』28px』、
」マージン-top "：" 160ピクセル"
}）
}
//成功にコミットした場合
のvar getSucessを=関数（）{
切り戻し（）
はconsole.log（ '成功'）
$（ 'diolag .diolagタイトル。'）、テキスト（ "成功提交！"）、CSS（{ "フォントサイズ"： "18px"、 "色"： "＃1 3b426b"、 "フォントの太"：」 400" }）
$（）ATTR（ 'diolag .IMG IMG。'。 "SRC"、 "{{basePathを}} / IMG /溶液/アプリ/ success.png"）。 （ "SRC"、「BasePathの}} {{/ IMG /ソリューション/アプリケーション/ success.png "）;
'Diolag .diolag-コンテンツ' $（）テキスト（"上司は、あなたの情報は、携帯電話の円滑なを脇に保つ、正常に送信されてきた、私たちは、ああ、できるだけ早くあなたと連絡を取るだろう！「）。CSS（{
"フォントサイズ"： "14px"、
"色"： "＃1 7d88a2"、
"行の高さ"： "28px"、
"マージントップ"： "160ピクセル"
}）
}
//重复提交时
VAR getAgain =関数（）{
切戻（）
コンソール。
$（ 'diolag .IMG IMG'）ATTR（ "SRC"、 "basePathを{{}} / IMG /ソリューション/ APP / fail.png"）;.
。$（「diolag .diolag- 。コンテンツ「）テキスト（ 『ボス、あなたの情報がそれを提出してきた、ああ再送信しないでください！』）CSS（{。
『フォントサイズ』： 『14px』、
『カラー』： 『＃1 7d88a2』、
「行の高さ」：「28px」、
「マージントップ」：「160ピクセル」
}）
}
//記入ない
=機能（）{VARのgetNocontを
切り戻し（）
はconsole.log（ 'getNocont'）
$（ 'diolag .diolagタイトル。'）テキスト（。" ！投稿に失敗しましたフォント"）、CSS（{。" -size「："18px"、 "色"： "＃1 3b426b"、 "フォント重量"： "400"}）
$（ 'Diolag .imgのIMG'）。Attrの（ "SRC"、 "/ IMG /ソリューション/アプリケーション/ fail.png basePathを{{}}" ;）
。'diolag .diolag-コンテンツ'。$（）CSS（{ "！上司、あなたが情報を入力する必要はありません、ああ完了し提出してください"（）のテキスト
"フォントサイズ"： "14px"、
"カラー"： "＃1 7d88a2"、
"行の高さ"： "28px"、
"トップ余白"： "160ピクセル"
}）
}
LET = trueにロック
のgetHeight（）
IF（patt1！テスト（mobileData））{
//電話間違ったイベント実行
getFailを（）
他{}
サブデータ= {ましょう
}
内容：contentData、
モバイル：mobileData、
タイプ：100
}
//これが成功している
IF（ロック）{
ロック= falseに
//送信要求
の$アヤックス（{
タイプ： "POST"、
URL： "要求アドレス"、
データ：サブデータ、
成功：関数（MSG） {
IF（msg.error == "0"）{
getSucess（）
}他IF（msg.error == " - 1"）{
getNocont（）
}
}
}）
}
}）
CSSスタイル
.solution-アプリ.backcap {
背景：RGBA（0,0,0,0.5）。
位置：固定;
幅：100％;
高さ：1200px;
Zインデックス：160;
トップ：0PX。
}
.solution-アプリ.diolag {
高さ：330px;
位置：相対;
テキスト整列：センター;
フロート：左;
}
.solutionアプリ.diolag-DIV {
位置：固定されました。
Zインデックス：200;
幅：580px;
高さ：330px;
パディング：16pxに134px;
ボックスサイズ：ボーダーボックス;
国境半径：10pxの;
背景：白;
}
.solutionアプリの.IMG {
位置：絶対。
テキスト整列：センター;
マージン：18px自動;
マージン下：16pxに;
左：245px;
}
.solutionアプリ.diolag .diolagアイコン{
位置：絶対。
右：18px;
幅：30px;
高さ：30px;
トップ：18px;
色：＃1 d0d0d0;
}
.solutionアプリ.diolag .diolagクローズ{
高さ：40ピクセル。
幅：100ピクセル;
色：#FFF;
フォントサイズ：14px;
マージントップ：は24px;
背景：＃599bff。
国境半径：4PX。
カーソル：ポインタ;
}
.solutionアプリは.diolagタイトル{
位置：絶対。
マージン：0自動;
左：250ピクセル;
トップ：140px;
}