bootstrap模态框之加载页面至modal-boby

一、效果图
思路：使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面



二、预订会话框Modal
<button id="reserveDialog" class="btn btn-primary btn-large" href="#reserveDialogModal" data-toggle="modal">预订</button>
<div class="modal fade" style="width:auto;" id="reserveDialogModal" tabindex="-1" style="display: none" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">场地预定</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div class="reserve_top_line">

</div>
<div class="modal-body form-horizontal" id="reserveForm">
<!--预定表单-->
<!--end 预定表单-->
</div>
</div>
<div class="modal-footer">
<button type="button" id="closeBtn" class="btn btn-default btn-flat md-close" data-dismiss="modal">
取消
</button>
<button type="button" id="saveBtn" class="btn btn-primary btn-flat">确定</button>
</div>
</div>
</div>
</div>

三、会话框的主体内容：reserveForm.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<form id="reserveFormBean" class="form-horizontal">
<input type="hidden" name="token" value="${token}"/>
<input type="hidden" name="project.id" value="${reserveField.reserveProject.id}"/>

<div class="content text-justify" style="text-align: center;vertical-align: middle;">
<div class="row">
<div class="col-lg-6 reserve_mid_line">
<div class="row">
<div class="form-group">
<label for="reserveFieldName" class="col-sm-2 control-label"> 场地:</label>
<div class="col-lg-4">
<input readonly="readonly" id="reserveFieldName" class="form-control"
value="${reserveField.name}"/>
<input type="hidden" id="consDate" name="consDate"
value="${date}"/>
<input type="hidden" name="projectId" value="${reserveField.reserveProject.id}"/>
<input type="hidden" name="reserveVenue.id" value="${venueId}"/>
<input type="hidden" id="fieldId" name="venueConsList[0].reserveField.id"
value="${reserveField.id}"/>
<input type="hidden" name="venueConsList[0].reserveVenue.id"
value="${reserveField.reserveVenue.id}"/>
<input type="hidden" name="venueConsList[0].consPrice" value="${reserveField.actualPrice}"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="startTime" class="col-sm-2 control-label">时间:</label>
<div class="col-sm-4">
<select id="startTime" class="form-control input-sm" name="venueConsList[0].startTime">
<c:forEach items="${times}" var="t">
<option
<j:if test="${t eq startTime}">selected="selected"</j:if>
value="${t}">${t}</option>
</c:forEach>
</select>
</div>
<label for="endTime" class="col-lg-2 control-label" style="text-align: center">至</label>
<div class="col-sm-4">
<select class="form-control input-sm" id="endTime" name="venueConsList[0].endTime">
<c:forEach items="${times}" var="t">
<option
<j:if test="${t eq endTime}">selected="selected"</j:if>
value="${t}">${t}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="frequency" class="col-sm-2 control-label">频率:</label>
<div class="col-sm-4">
<select class=" form-control input-sm" id="frequency" name="frequency" class="select2">
<option value="1">单次</option>
<option value="2">每天</option>
<option value="3">每周</option>
</select>
</div>
<div class="col-lg-2">
<label for="halfCourt" class="control-label">类型:</label>
</div>
<div class="col-lg-2">
<input type="radio" id="halfCourt" name="halfCourt" value="1" class="icheck"/>半场
</div>
<div class="col-lg-2">
<input type="radio" id="allCourt" name="halfCourt" value="0" class="icheck" checked="checked"/>全场
</div>
</div>
</div>

<div class="row">
<div class="form-group">
<label for="tutorId" class="col-sm-2 control-label">教练:</label>
<div class="col-sm-4">
<select id="tutorId" name="tutor.id" class="form-control input-sm">
<option value="">请选择</option>

<c:forEach items="${tutors}" var="t">
<option data-price="${t.price}" value="${t.id}" onclick="">${t.name}</option>
</c:forEach>
</select>
</div>
<div class="col-lg-2">
<label for="tutor_price" class="control-label">价格:</label>
</div>
<div class="col-lg-4">
<input readonly="readonly" id="tutor_price" class="form-control"
value="0元/小时"/>
</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="tutorId" class="control-label col-sm-2">备注:</label>
<div class="col-sm-9">
<textarea id="remarks" name="remarks" class="form-control"></textarea>
</div>
</div>
</div>
</div>

<div class="col-lg-6">
<div class="row">
<div class="form-group">
<label for="isMember" class="control-label col-lg-3">顾客类型:</label>
<div class="col-lg-3">
<input type="radio" id="isMember" class="icheck" value="1" checked="checked"
name="memberType"/>会员
</div>
<div class="col-lg-3">
<input type="radio" class="icheck" value="0" name="memberType"/>非会员
</div>
</div>
</div>
<div class="row" id="memberSelect">
<div class="form-group">
<label for="memberId" class="control-label col-lg-3">会员姓名:</label>
<div class="col-sm-6">
<select class="form-control" id="memberId" name="member.id">
<option value="">--请选择--</option>
<c:forEach items="${memberList}" var="m">
<option value="${m.id}">${m.mobile}-${m.name}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="userName" class="control-label col-lg-3">姓名:</label>
<div class="col-lg-6"><input id="userName" name="userName"
type="text" readonly="readonly"
class="form-control input-sm"/></div>
</div>
</div>
<div class="row" id="deposit" style="display: none">
<div class="form-group">
<label for="consPrice" class="control-label col-lg-3">押金:</label>
<div class="col-lg-6">
<input type="text" id="consPrice" name="consPrice"
class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="consMobile" class="control-label col-lg-3">手机:</label>
<div class="col-lg-6"><input id="consMobile" name="consMobile"
type="text" readonly="readonly"
class="form-control"/></div>
</div>
</div>
</div>
</div>
</div>
</form>

<script type="text/javascript">
$(document).ready(function () {
$("#reserveDialogModal").draggable({
handle: ".modal-header"
});
$("input[name='memberType']").click(function(){
var memberType=$(this).val();
if(memberType=="1"){
$("#deposit").hide();
$("#userName").attr("readonly", "true");
$("#consMobile").attr("readonly", "true");
$("#memberSelect").show();
}
if(memberType=="0"){
$("#deposit").show();
$("#userName").removeAttr("readonly");
$("#consMobile").removeAttr("readonly");
$("#memberSelect").hide();
}
})
$("#memberId").on('change', function () {
var mid = $(this).attr("value");
var text = $(this).find("option:selected").text();
var mobile = text.split('-')[0];
var username = text.split('-')[1];
$("#userName").attr("value", username);
$("#consMobile").attr("value", mobile);
});

$("#startTime").on('change', function () {
var startTime = $("#startTime").attr("value");
var endTime = $("#endTime").attr("value");
});

$("#endTime").on('change', function () {
var startTime = $("#startTime").attr("value");
var endTime = $("#endTime").attr("value");
});

//频率
$("#frequency").on('change', function () {
var frequency = $(this).val();
if ('1' != frequency) {
$("#date_div").show();
} else {
$("#date_div").hide();
}
});

//教练
$("#tutorId").on('change', function () {
var price = $(this).find("option:selected").attr("data-price");
if (price == undefined || price == '') {
$("#tutor_price").val("0元/小时");
} else {
$("#tutor_price").val(price+"元/小时");
}
});
});

</script>

三、JS
核心代码： $("#reserveForm").html(result);$(document).ready(function () {
//-------预定---------
$(".table-chang tbody td").on('dblclick', function () {
if (!$(this).hasClass("access")) {
return;
}
var fieldId = $(this).attr("data-field");
var time = $(this).attr("data-time");
var price = $(this).attr("data-price");
var isHalfCourt = $(this).attr("data-isHalfCourt");
if (price == null || price == "" || price == undefined) {
errorLoding("抱歉，该时间段价格尚未设定");
return;
}
var date = consDate;//日期
jQuery.postItems({
url: ctx + '/reserve/field/reserveForm?math='+Math.random(),
data: {fieldId: fieldId, time: time, date: date, venueId: venueId, isHalfCourt: isHalfCourt},
success: function (result) {
if (result) {
$("#reserveForm").html(result);
$("#reserveDialog").click();
$("#reserveForm .select2").select2({
width: '100%'
});
$('#reserveForm .icheck').iCheck({
checkboxClass: 'icheckbox_square-blue checkbox',
radioClass: 'iradio_square-blue'
});
}
}
});
});
})