本文主要是介绍bootstrap点击弹框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<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="手机" οnblur="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>表示：只能通过关闭按钮来关闭弹框，如果没有该属性点击任意位置，弹框都会关闭。
这篇关于bootstrap点击弹框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
