<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>表示：只能通过关闭按钮来关闭弹框，如果没有该属性点击任意位置，弹框都会关闭。
扫一扫
947
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
