问题描述:
点击“新增号码”按钮,弹出模态框,可以录入或者查看数据
练习方式:
1.简单使用:
库文件支持:bootstrap.css定义好了模态框的样式,直接调用很方便
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
href="#myModal":模态框的ID
data-toggle="modal":表示打开模态框
data-dismiss="modal":表示关闭模态框,下文“取消按钮”用到了
展示:
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>请输入11位长度电话号码</h3>
</div>
<div class="modal-body">
<input type="text" class="_phone"/> <font color="red" class="_msg"></font>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" οnclick="setphone();">保存</a>
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">取消</a>
</div>
</div>
效果:
2.深入使用,获取后台数据到Modal页面展示
触发:<a data-toggle="modal" href="${ctx }/xx/xx?id=${entity.id}" data-target="#payment_records" class="btn btn-success" >回款</a>
(理解:data-target属性:寻找id为payment_records的div;data-toggle="modal"属性:打开模态框;href属性:访问后台、获取数据、返回到页面,并将此内容自动加载到modal格式的div的body区域(<div class="modal-body"></div>)中)
展示:
<!-- 回款的弹出框 -->
<div id="payment_records" class="modal hide fade" style="">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a href="javascript:submitPaymentRecordsForm();" class="btn btn-success" οnclick="">保存</a>
<a href="#" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">取消</a>
</div>
</div>
3.ajax取值到模态框中显示:
// 条件满足则筛选数据
if(flag) {
var form = $(obj).parents().filter("form")[0];// 1. 定位到form表单
$.ajax({
type: "get",
url:form.action,// 2.获取form表单的访问路径
data:$(form).serialize(),// 3.处理form表单的数据
async: false,
error: function(request) {
alert("网络错误!");
},
success: function(data) {
$("#old_customer_list_dialog .modal-body").html(data);// 4.将返回的数据交给modal body 即: <div class="modal-body"></div>
}
});
}
此时,ajax请求的方式不是返回json数据,而是一个普通方法,返回到的一个页面展示。但通过
success: function(data) {
$("#old_customer_list_dialog .modal-body").html(data);// 4.将返回的数据交给modal body 即: <div class="modal-body"></div>
}
可以将返回的页面内容全部加载到modal中显示。