把一个页面嵌入到另一页面进行弹框显示

最新推荐文章于 2024-01-31 16:41:01 发布

qq_26566125

最新推荐文章于 2024-01-31 16:41:01 发布

阅读量1.6w

点赞数 2

分类专栏： java开发，网络编程文章标签：模态框 bootstreap 页面的嵌套 ajax 无刷新

本文链接：https://blog.csdn.net/qq_26566125/article/details/79636376

版权

java开发，网络编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在项目过程中我们经常会用到把一个页面嵌入到另外的一个页面当中去比如以一个模态框的形式去展示但是这个过程中而且还会涉及到数据的交互比如在列表的展示页我们希望修改和添加是通过一个页面的弹框的形式去进行而不是通过直接跳转到一个对应的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>

<div class="modal fade" id="commonMaxDlg">
<div class="modal-dialog modal-lg">
<div class="modal-content"></div>
</div>
</div>


<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>

其他内容被我删除

</body>

update.jsp

<%@ page contentType="text/html; charset=UTF-8" %>

<%@ include file="../include/header.jsp"%>

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>

</body>

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

qq_26566125

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
把一个页面嵌入到另一页面进行弹框显示

在项目过程中我们经常会用到把一个页面嵌入到另外的一个页面当中去比如以一个模态框的形式去展示但是这个过程中而且还会涉及到数据的交互比如在列表的展示页我们希望修改和添加是通过一个页面的弹框的形式去进行而不是通过直接跳转到一个对应的jsp或者一个html页面又或者说我们在项目的过程中对项目进行版本的升级原有的页面设计就是通过直接跳转到一个jsp和html页面那么这个时...
复制链接

扫一扫