bootstrap點選彈框
阿新 • • 發佈：2018-12-30
<h2><span style="margin: 0px; padding: 0px; font-family: verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25.2px;"><span style="color: rgb(255, 0, 0);">bootstrap彈框1:</span></span></h2><script type="text/javascript" src="${base}/resources/shop/website/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="${base}/resources/shop/website/js/bootstrap.min.js"></script> <script type="text/javascript" src="${base}/resources/shop/website/js/bootstrap-modal.js"></script>
</pre><pre code_snippet_id="1947777" snippet_file_name="blog_20161025_3_1288052" name="code" class="html"> <input type="button" class="btn upd" <span style="background-color: rgb(51, 255, 51);">data-toggle="modal" data-target="#myModal"</span> value="修改"> 點選這個按鈕可以彈出層
</pre><pre code_snippet_id="1947777" snippet_file_name="blog_20161025_5_7352120" name="code" class="html"><pre name="code" class="html"><!--修改資訊彈出層--> <div class="modal hide fade" <span style="color:#33ff33;">id="myModal"</span> tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form id="saveForm" action="${base}/member/accountManager/saveAddressInfo.jhtml" method="post" > <div class="modal-header"> <h3 id="myModalLabel">修改資訊</h3> </div> <div class="modal-body"> <div class="row"> <div class="lable"><b>*</b>使用者名稱</div> <div class="input"> <input type="text" name="username" value="" placeholder="姓名"> </div> </div> <div class="row"> <div class="lable"><b>*</b>手機</div> <div class="input"> <input type="text" name="mobile" value="" placeholder="手機"> </div> </div> <div class="row"> <div class="lable"><b>*</b>地址</div> <div class="input"> <input type="text" name="address" value="" placeholder="地址"> </div> </div> <input type="submit" class="btn upd" value="儲存" > <input type="button" class="close" data-dismiss="modal" value="取消"></input> 點選取消關閉彈框 </div> </form> </div>
注意：data-target屬性，指向了model的id，所以點選按鈕，model就會彈出來了。
bootstrap彈框2:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模態框</title> <link rel="stylesheet" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <style type="text/css"> body { padding: 100px; } </style> </head> <body> <button class="btn btn-primary" <span style="color:#ff0000;">data-toggle="modal" data-target="#pop-window"</span> <span style="color:#33ff33;background-color: rgb(0, 102, 0);">data-backdrop="static"></span>彈出</button> <div class="modal" <span style="color:#ff0000;">id="pop-window"</span>> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-title"> 模態框 </div> </div> <div class="modal-body"> <div class="row"> <div class="lable">姓名</div> <div class="input"> <input type="text" name="consignee" value="" placeholder="姓名"/> </div> </div> <div class="row"> <div class="lable">手機</div> <div class="input"> <input type="text" name="phone" value="" placeholder="手機" onblur="ispwd()" id="pwd"/> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default" <span style="background-color: rgb(255, 255, 0);">data-dismiss="modal</span>">關閉</button> <button class="btn btn-primary">確定</button> </div> </div> </div> </div> </body> </html>
<span style="color:#33ff33;background-color: rgb(0, 102, 0);">data-backdrop="static" </span>表示：只能通過關閉按鈕來關閉彈框，如果沒有該屬性點選任意位置，彈框都會關閉。