在项目过程中我们经常会用到把一个页面嵌入到另外的一个页面当中去   比如以一个模态框的形式去展示  但是这个过程中而且还会涉及到数据的交互 比如在列表的展示页我们希望修改和添加是通过一个页面的弹框的形式去进行  而不是通过直接跳转到一个对应的jsp或者一个html页面    又或者说  我们在项目的过程中对项目进行版本的升级  原有的页面设计就是通过直接跳转到一个jsp和html页面  那么这个时候我们想直接通过去嵌套进来  而且不影响其他的功能   并且不需要去做任何的代码的修改等 诸如此类的应用场景  我们又该如何的操作呢  今天我就给大家带来这种效果的实现   使用的bootstreap中的模态框实现的  之前也有用过easyui进行操作  相对的容易  所以大家可以借鉴 

      第一步:我们使用bootstreap先要对它进行有一个大概熟悉，这要我们就可以更好的使用它   出了问题也知道如何去修改  这里大家可自行下载相应的api和对应的教程

      第二步:去官方下载对应的js，css文件

      第三步:按照官方的文档和案例引入对应的js，css文件

      第四步:编写相应的demo实现想要的功能和测试

      第五步：项目的过程中使用和代码的封装

 这是我在使用任何一项技术的时候所使用的步骤  大家可借鉴   根据自己个人的能力和适合自身的情况，话不多说  开始今天的案例实现。

找到官方的文档javascript插件中找到模态框案例

根据官方提示注意

1.千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

2.务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

3.浏览器的兼容性具体太多,大家可自行查看

现在假设你有两个jsp页面list.jsp和update.jsp两个页面  原本两个页面的功能都是独立的现在需要把update.jsp直接通过弹框的形式在list.jsp中弹出，这里我做了一个封装成一个model.jsp根据官方的案例进行封装,其中header.jsp重要是一些引入的js，css文件等

先看model.jsp中的功能

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="../include/header.jsp"%><body>
<!-- 公用对话框1 -->
<div class="modal fade" id="commonMaxDlg">
 <div class="modal-dialog modal-lg">
 <div class="modal-content"></div>
 </div>
</div>

<!-- 公用对话框2 -->
<div class="modal fade" id="commonMinDlg">
 <div class="modal-dialog" style="width: 598px;">
 <div class="modal-content"></div>
 </div>
</div>
 
<script type="text/javascript">
//公共对话框1
function showPubModal(modalId,url,tdPadding){
 var dlObj = $(modalId);
 $(dlObj).find('.modal-content').empty();
 $(dlObj).modal({show: true});
 $(dlObj).find('.modal-content').load(url, function(){
 $(this).css('padding','15px');
 var tableObj = $(this).find('.ReportTable');
 $(tableObj).addClass('table table-bordered').removeClass('ReportTable');
 $(tableObj).find('td').css('padding-top',tdPadding);
 $(dlObj).css('overflow','auto');
 });
}
//公共对话框2
function showPubModal2(modalId,url){
 var dlObj = $(modalId);
 $(dlObj).find('.modal-content').empty();
 $(dlObj).modal({show: true});
 $(dlObj).find('.modal-content').load(url, function(){
 $(this).css('padding','15px');
 var tableObj = $(this).find('.ReportTable');
 $(tableObj).addClass('table table-bordered').removeClass('ReportTableList');
 $(tableObj).find('td').css('padding-top','6px');
 $(dlObj).css('overflow','auto');
 });
}

//关闭公共对话框
function modalToggleFun(modalId){
 $(modalId).modal('toggle'); 
}
//公共对话框关闭事件和打开
function modalHiddenFun(hiddenModalId,showModalId){
 $(hiddenModalId).on('hidden.bs.modal',function(){
 $(showModalId).modal({show: true});
 });
}
</script> </body>

list.jsp页面

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="../include/header.jsp"%>
<script language="JavaScript" type="text/javascript">
//add
function clk_update(id){
 var url = 'AddAction.do?operate=add&Id="+id; 
 window.top.showPubModal('#commonMaxDlg',url,'5px');
}<body>

     其他内容被我删除

  

<input type="button" value="修改" οnclick="clk_update(1)"> 

</body>
update.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="../include/header.jsp"%>
<script language="JavaScript" type="text/javascript"> 



function clk_save(){ 

 var srvUrl = "EditAction.do?operate=save"; 

 var nModal = $(window.top.document).find('#commonMaxDlg'); 

 var frm1 = $(nModal).find('form[name=Form]'); 

 var nBtn = $(nModal).find('#SaveBtn'); 

 // 禁用按钮 

 nBtn.html(' 请稍候...'); 

 nBtn.addClass('disabled'); 

 var frmStr = $(frm1).serialize();
       $.ajax({
 url : srvUrl,
 cache : false,
 type : "post",
 async : true,
 data : frmStr,
 success : function(result) {
 $(nModal).modal('hide');
 nBtn.removeClass('disabled');
 nBtn.html(' 保存'); alert("保存成功");

                        保存成功这里我想接下这实现一种展示页面无刷新的效果,这里我们可以根据父级去找到上一条页面的值  然后通过js去实现这一条值重新的填充进去  从而达到一种无刷新的效果


}, 

 error : function(request, error) { 

 nBtn.removeClass('disabled'); 

 nBtn.html(' 保存'); 

 alert("操作异常"); 

 } 

 }); 

} 

</script> 

<body> 

<div class="modal-header">
 <h4 class="modal-title" id="kpitemAddLabel">编辑信息</h4>
 <div class="pull-right headerBtn">
 <a class="btn btn-default fa fa-remove" data-dismiss="modal"> 取消</a>
 <a class="btn btn-primary fa fa-check" style="margin-left: 15px;" href="javascript:clk_save()" id="SaveBtn"> 保存</a>
</div> 

<form name="Form" id="updateForm" action="EditAction.do" method="post">
        <input type="text" name="uname"/>
</form>
</body>

这样就可以实现一个简单的直接把一个页面的功能嵌套在本页面中 ,这里我只是对修改的页面中的具体实现做了一个修改,这个可根据个人情况而定,有不明白的地方可留言，希望能够解决你的问题