2013.03.13 bootstrap 模态框使用

问题描述：
点击“新增号码”按钮，弹出模态框，可以录入或者查看数据

练习方式：
1.简单使用：
《bootstrap模态框学习》

库文件支持：bootstrap.css定义好了模态框的样式，直接调用很方便

<link href="bootstrap.css" rel="stylesheet">

<script src="jquery.js" type="text/javascript"></script>

<script src="bootstrap.js" type="text/javascript"></script>

触发：<a href="#myModal" class="btn" data-toggle="modal">新增号码</a>
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" onclick="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" onclick="">保存</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中显示。