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">&times;</button>
    <h3>请输入11位长度电话号码</h3>
  </div>
  <div class="modal-body">
<input type="text" class="_phone"/>&nbsp;&nbsp;&nbsp;<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中显示。