最近、プロジェクトの要件がアクセス制御を伴うプロジェクトを作成しました。ログインを使用する必要があるページまたは関数にアクセスすると、ログインボックスがポップアップ表示されます。
効果は次のとおりです。
図1-ユーザー名をクリックすると、ログインしていない場合、ログインボックスがポップアップします
この関数の詳細な説明：
ログインが関与していない場合、ログインボックスが隠されています
ログインすると、ログインボックスがページの左上隅に表示されます
ログインボックスは、ログインが成功した後に隠されています
実装のアイデア：
ボディエンドタグの前にログインしたDivを挿入します。その位置付け方法が絶対的であり、その位置が左上隅にあると仮定します。
ログインボックスのデフォルトの表示プロパティはありません。ログインがトリガーされたら、プロパティをブロックして変更します
サンプルコードで添付：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> title </ittitle> </head> <style> h3 {width：100％; padding-bottom：10px; border-bottom：2px solid＃ccc;} span {パディング：3px 10px; background-color：＃999; font-size：20px; color：white; cursor：pointer;} #log {display：none;幅：400px;高さ：400px;パディング：30px 40px;バックグラウンドカラー：＃f3f5f6;位置：修正;上：70px ;;右：30px;} .error {float：right; color：red; font-size：1.2em; margin-right：10px} </style> <link rel = "href =" // cdn.bootcss.com/bootstrap/3.5/CSS/BOOTSTRAP.MIN.CSCSSESTRICT src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src =" // cdn.bootcss.com/bootstrap/3.5.5/js/boottrap.min.js"> onclick = "document.getElementbyid（ 'log'）。style.display = 'block'"> loginボックスがポップアップ</button> <div id = "log"> <form action = "../ control/logincheck.php" method = "> <h3> type = "text" name = "username" id = "username" placeholder = "username" onblur = 'checkname（）' cechname（） 'cechname（）' 'required/> </div> <div> <label for = "password"> label*</label> <span id = "psword"> </span> <inputタイプ= ""パスワード= "パスワード="パスワード= "パスワード/ </div> <div> <label> <span> <入力タイプ= "チェックボックス" value = 'true'> me </span> </label> </div> <入力タイプ= "value"/> <p> <a href = "register.html" >>>アカウントはまだありませんか？登録に移動</a> </p> </form> <div id = "close"> <span onclick = "document.getElementbyid（ 'log'）。style.display = 'none'"> close </span> </div> </div> </div> </div> </div> < var name = eval（document.getElementById（ 'username'））。value; if（name.length> 20 || name.length <1）document.getElementById（ "user"）。innerhtml = "ユーザー名の長さは1-20です！" ; } var checkpassword = function（）{document.getElementById（ "psword"）。innerhtml = ""; var name = eval（document.getElementById（ 'password'））。value; if（name.length> 12 || name.length <6）document.getElementById（ "psword"）。innerhtml = "パスワードの長さは6-12の間です！" ; } </script> </body> </html>Angularjsで完全に検証とプロンプトを実装する方法：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> ng-controller = "validatectrl" name = "myform" novalidate> <p> username：<br> <入力タイプ= "text" name = "user" ng-model = "user" reby> <span style = "color：red" ng-show = "myform.user。ユーザー名が必要です。 </span> </span> </p> <p> email：<br> <入力タイプ= "email" name "name" ng-model = "expene" reby> <span style = "color：red" ng-show = "myform.email。$ dirty && myform.email。 </span> <span ng-show = "myform.email。$ error.email">違法なメールアドレス。 </span> </span> </p> <p> <入力タイプ= "ng-disabled =" myform.user。$ dirty && myform.user。$ invalid || myform.email。 function（$ scope）{$ scope.user = 'username'を入力します上記は、編集者によって紹介された合法性チェック[推奨]を備えたブートストラップポップアップログインボックスのコードの例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！