把一個頁面嵌入到另一頁面進行彈框顯示

阿新 • • 發佈：2019-01-18

在專案過程中我們經常會用到把一個頁面嵌入到另外的一個頁面當中去比如以一個模態框的形式去展示但是這個過程中而且還會涉及到資料的互動比如在列表的展示頁我們希望修改和新增是通過一個頁面的彈框的形式去進行而不是通過直接跳轉到一個對應的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>

這樣就可以實現一個簡單的直接把一個頁面的功能巢狀在本頁面中 ,這裡我只是對修改的頁面中的具體實現做了一個修改,這個可根據個人情況而定,有不明白的地方可留言，希望能夠解決你的問題

把一個頁面嵌入到另一頁面進行彈框顯示

把一個頁面嵌入到另一頁面進行彈框顯示

如何跳轉指定頁面後再次跳轉到另一頁面或原來的頁面

frams中子頁面重新整理另一個子頁面

前嗅教程：同一個網站中從另一頁面采集數據

【JAVA程式設計題】現在輸入n個數字，以逗號，分開；然後可選擇升或者降序排序；按提交鍵就在另一頁面顯示按什麼排序，結果為，提供reset

JSP中實現在某頁面停留5秒後,自動重定向到另一頁面

SQLSERVER復制數據庫某一個表到另一個數據庫中（可跨服務器）

android開發中如何從當前頁面返回上一頁面

springboot 前臺Html嵌入另一html問題

小程式在當前頁面改變上一頁面狀態

把一個數字的每一位儲存到一個數組中

漫畫：htts是如何保證一臺主機把資料安全發給另一臺主機

Spring 定時器低版本不支援“L”的cron表示式每個月的最後一個工作日的另一種解法

小白級別，一臺計算機如何把資料傳送給另一臺計算機

利用layer實現MVC頁面數據互交提示彈框

js+css jQuery實現頁面後退執行 & 遮罩彈框

hive使用技巧：把很多小檔案匯入一張表中、顯示在檔案中位置和行數等。

CVE-2017-8759完美復現（另附加hta+powershell彈框閃爍解決方案）

怎麼把部分jsp程式碼嵌入另一個jsp頁面裡面

js實現把一個頁面層數據幸運28源碼出售傳遞到另一個頁面

把一個頁面嵌入到另一頁面進行彈框顯示

相關推薦