ポップアップ式のログインボックスとシャドー効果を実現するJSP
この例では、ポップアップ・ログイン・ボックスとシャドウ効果を実現するためのJSPの具体的なコードを、参考のために以下のように共有します。
まずは、JSPのポップアップ式ログインボックスのアイデアから。JSPで新しいdivレイヤーを作成し、Displayをnoneに設定して、開いたときに見えないようにします。そして、そのdivレイヤーに対してclickイベントを登録し、ログインボタンをクリックしたときなどのクリックイベントによって見えるようにして、ポップアップ効果を実現するようにします。
コードはこのようになります。
CSSのスタイルです。
yeshen am MacBook-Pro ~/Library/Android/sdk/platform-tools/systrace λ python systrace.py --time=10 -o mynewtrace.trace sched gfx view wm
Traceback (letzter Aufruf):
Datei "systrace.py", Zeile 48, in <module>
from systrace import run_systrace
Datei "/Users/yeshen/Library/Android/sdk/platform-tools/systrace/catapult/systrace/systrace/run_systrace.py", Zeile 43, in <module>
von systrace import systrace_runner
Datei "/Users/yeshen/Library/Android/sdk/platform-tools/systrace/catapult/systrace/systrace/systrace_runner.py", Zeile 15, in <module>
from systrace.tracing_agents import battor_trace_agent
Datei "/Users/yeshen/Library/Android/sdk/platform-tools/systrace/catapult/systrace/systrace/tracing_agents/battor_trace_agent.py", Zeile 11, in <module>
from battor import battor_wrapper
Datei "/Users/yeshen/Library/Android/sdk/platform-tools/systrace/catapult/common/battor/battor/battor_wrapper.py", Zeile 22, in <module>
importieren seriell
ImportFehler: No module named serial
JSコードです。
brew install python
pip install pyserial
htmlのコードです。
<div id="win" class="win" style="display:none">
<form action="javascript:jump();" method="post">
<span style="font-size: 20px;"> 欢迎登录网上书店 </span> <br />
<label class="label"> Username: </label> <input type="text" class="input" id="user" /> ; <br />
<label class="label"> Password: </label> <input type="password" class="input" id="psw" /& gt; <br />
<input type="reset" value="re-input" class="input1" /& gt;
<input type="button" value="quit" class="input3" onclick="closeLogin();" />
<input type="submit" value="OK" class="input2" />
</form>
</div>
<a href="javascript:openLogin();" >open</a>
<a href="javascript:closeLogin();" >close</a>
ランニングの効果
で開くボタンをクリックします。
閉じるをクリックすると消えます。
ここでも、クリック後に影の効果が発生し、つまりログインボックス以外は暗くなって操作不能になります。核となるアイデアは、divレイヤーを設定し、最初は非表示に設定して、例えばクリックするとログインボックスと一緒にポップアップするようにし、divの幅と高さをそれぞれ画面の高さと幅に設定し、透明度のある暗い色を選択します(これは上記のログインボックスの上で行われます)。
コードは以下の通りです。
CSSのスタイルです。
<style>
.hidebg {
position:absolute; left:0px; top:0px;
background-color:#000;
width:100%;
filter:alpha(opacity=60);
opacity:0.6;
display:none;
z-Index:2;
}
</style>
JSコードです。
function openLogin(){
document.getElementById("hidebg").style.display="block";
document.getElementById("hidebg").style.height=document.body.clientHeight+"px";
}
function closeLogin(){
document.getElementById("hidebg").style.display="none";
}
htmlのコードです。
<div id="hidebg" class="hidebg"></div>
走ることの効果
クリックすると開きます。
閉じる]をクリックすると閉じます。
上記のコードの2つの部分を一緒に書くことで、ポップアップのログインボックスとその周囲の影を形成することができます。
以上が今回の記事の内容ですが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。
関連
-
jsp request.getParameter()とrequest.getAttribute()メソッドの違いについて解説しています。
-
jsp レスポンスオブジェクトのページリダイレクト、時刻の動的表示
-
JSPデータ連動プロセス解析
-
Layuiを使用したSSMフレームワークJSPによるレイヤーパップアップ効果の実現
-
ページメッセージのポップアップボックスの右下を実現するJSP
-
数字当てゲームの jsp+servlet 実装
-
JSPページ内で画像キャプチャを動的に生成するメソッドの例
-
jsp cookie+sessionで簡単な自動ログイン。
-
Javawebプロジェクト実行エラーHTTPステータス404の解決策
-
サーバーへのファイルアップロード機能を実現するJSP+サーブレット
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン