Bootstrap學習筆記（9）--模態框（登錄/注冊彈框）

本文轉載自查看原文 2017-02-27 23:00 19866 bootstrap

說明：

1. 上來一個ul先把登錄和注冊兩個鏈接扔進去，ul的類nav,navbar-nav是導航條，navbar-right讓他固定在右側。每個li的里面，data-toggle="modal"是點擊出現一個modal模組，data-target="#register"是點擊之后出現的彈框的id，再里面的span是那個小人圖標。

2. 接下來就是一個大div裝着這個注冊的彈框，id="register"，用來上面的data-target找到目標，class="modal fade"是說這是個modal模態框，fade是漸入效果，如果不加就是點擊注冊，直接出現，沒有從上面慢慢滑下的效果， tabindex="-1"，讓esc鍵起作用，按esc后彈框消失，這個tabindex設置任何值或空的都起作用，不明白原理是啥。

3. 再里面，先是一個class="modal-dialog"，算是個對話框，沒有的話四周緊貼邊框不好看，里面就是class="modal-content"內容了。

4. 內容分為三個部分，分別是class="modal-header"，class="modal-body"，class="modal-footer"，有點像HTML的標簽。

5. header和footer都會帶一條橫線，不太好看，雖然footer會讓兩個按鈕右側對齊，不過還是不用比較好。

6. 其實還有一個class="modal-title"，可以作為題目，字體大，用class="text-center"可以居中。

7. 右上角那個叉號，放在了一個class="modal-body"的按鈕里面，這個body可以到處用，還不錯。class="close"是一個樣式，讓這個叉號按鈕好看一點，並且位於右上角。 data-dismiss="modal"是指點擊后關閉這個模態框。<span>×</span>是叉號的轉義字符。

8. 然后中間的class="modal-body"就是一個普通的form表單，每個項目用class="form-group"，input用class="form-control"改變一下樣式就好了。

9. 最后的兩個提交和取消的按鈕，外面加一個div，class="text-right"就可以右對齊了。

10. 下面加了個a鏈接，讓兩個彈框互相切換，data-toggle="modal"點擊出現模態框， data-dismiss="modal"點擊關閉當前模態框， data-target="#login"點擊后出現的目標模態框id。

11. 后面那個登錄彈框一毛一樣，不說了。

效果圖：

代碼：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1">
  6     <title>Document</title>
  7     <link rel="stylesheet" href="css/bootstrap.css">
  8     <script src="js/jquery.js"></script>
  9     <script src="bootstrap/js/bootstrap.min.js"></script>
 10 
 11     <style>
 12         body{
 13             background-color: #C7EDCC;
 14             font-family: "microsoft yahei";
 15             /*min-width: 800px;*/
 16         }
 17         img{
 18             width: 100%;
 19             /*height: 462px;*/
 20         }
 21         .navbar{
 22             /*margin-bottom: -10px;*/
 23         }
 24         #myppt{
 25             margin-top: -20px;
 26 
 27         }
 28     </style>
 29 </head>
 30 <body>
 31     <ul class="nav navbar-nav navbar-right">
 32         <li><a data-toggle="modal" data-target="#register" href=""><span class="glyphicon glyphicon-user"></span> 注冊</a></li>
 33         <li><a data-toggle="modal" data-target="#login" href=""><span class="glyphicon glyphicon-log-in"></span> 登錄</a></li>
 34     </ul>
 35     <!-- 注冊窗口 -->
 36     <div id="register" class="modal fade" tabindex="-1">
 37         <div class="modal-dialog">
 38             <div class="modal-content">
 39                 <div class="modal-body">
 40                     <button class="close" data-dismiss="modal">
 41                         <span>&times;</span>
 42                     </button>
 43                 </div>
 44                 <div class="modal-title">
 45                     <h1 class="text-center">注冊</h1>
 46                 </div>
 47                 <div class="modal-body">
 48                     <form class="form-group" action="">
 49                             <div class="form-group">
 50                                 <label for="">用戶名</label>
 51                                 <input class="form-control" type="text" placeholder="6-15位字母或數字">
 52                             </div>
 53                             <div class="form-group">
 54                                 <label for="">密碼</label>
 55                                 <input class="form-control" type="password" placeholder="至少6位字母或數字">
 56                             </div>
 57                             <div class="form-group">
 58                                 <label for="">再次輸入密碼</label>
 59                                 <input class="form-control" type="password" placeholder="至少6位字母或數字">
 60                             </div>
 61                             <div class="form-group">
 62                                 <label for="">郵箱</label>
 63                                 <input class="form-control" type="email" placeholder="例如:123@123.com">
 64                             </div>
 65                             <div class="text-right">
 66                                 <button class="btn btn-primary" type="submit">提交</button>
 67                                 <button class="btn btn-danger" data-dismiss="modal">取消</button>
 68                             </div>
 69                             <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有賬號？點我登錄</a>
 70                     </form>
 71                 </div>
 72             </div>
 73         </div>
 74     </div>
 75     <!-- 登錄窗口 -->
 76     <div id="login" class="modal fade">
 77         <div class="modal-dialog">
 78             <div class="modal-content">
 79                 <div class="modal-body">
 80                     <button class="close" data-dismiss="modal">
 81                         <span>&times;</span>
 82                     </button>
 83                 </div>
 84                 <div class="modal-title">
 85                     <h1 class="text-center">登錄</h1>
 86                 </div>
 87                 <div class="modal-body">
 88                     <form class="form-group" action="">
 89                             <div class="form-group">
 90                                 <label for="">用戶名</label>
 91                                 <input class="form-control" type="text" placeholder="">
 92                             </div>
 93                             <div class="form-group">
 94                                 <label for="">密碼</label>
 95                                 <input class="form-control" type="password" placeholder="">
 96                             </div>
 97                             <div class="text-right">
 98                                 <button class="btn btn-primary" type="submit">登錄</button>
 99                                 <button class="btn btn-danger" data-dismiss="modal">取消</button>
100                             </div>
101                             <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">還沒有賬號？點我注冊</a>
102                     </form>
103                 </div>
104             </div>
105         </div>
106     </div>
107 
108 </body>
109 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap模態框彈框后執行Ajax BootStrap學習筆記JS插件（一）--模態彈出框 bootstrap table 第一彈：實現模態框彈出編輯 bootstrap 模態框關閉 BootStrap——模態框 Bootstrap模態彈出框 Bootstrap模態框按鈕 Bootstrap 模態框 Bootstrap模態框（MVC） bootstrap的模態框的使用