遮罩層+Iframe如何實(shí)現(xiàn)界面自動顯示
這篇文章給大家分享的是有關(guān)遮罩層+Iframe如何實(shí)現(xiàn)界面自動顯示的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供十堰鄖陽網(wǎng)站建設(shè)、十堰鄖陽做網(wǎng)站、十堰鄖陽網(wǎng)站設(shè)計(jì)、十堰鄖陽網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、十堰鄖陽企業(yè)網(wǎng)站模板建站服務(wù)，10年十堰鄖陽做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
效果
在教師評閱作業(yè)時(shí)，先把學(xué)生的作業(yè)展現(xiàn)出來，然后關(guān)掉界面進(jìn)行評分
（用百度主頁做演示）
Iframe
iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁，實(shí)現(xiàn)它的方法有多種：
URL 指向隔離頁面的位置，由于當(dāng)時(shí)對src有誤解，所以沒有選用這種方法。
點(diǎn)擊查看
public load() {
this.workService.getById({id: this.params.workId})
.subscribe((data) => {
this.work = data;
this.goToWork();
}, () => {
console.log('error');
});
}goToWork(): void {
this.linkToWork.nativeElement.click();
}當(dāng)時(shí)出來的效果是這樣的但是有很大的缺陷，就是顯示網(wǎng)頁的窗口很小，學(xué)生的作業(yè)根本看不全，需要拖動底部和側(cè)欄的滾動條。
Iframe + 遮罩層
遮罩層就是為了把下方的界面擋起來，然后讓ifream的內(nèi)容顯示在遮罩層上，以實(shí)現(xiàn)全屏顯示學(xué)生作業(yè)內(nèi)容的效果，代碼如下：
點(diǎn)擊查看
有關(guān)遮罩層的使用可以看一下這個(gè)文檔：5 定制提示框【前】
問題
利用showPopWindow這個(gè)屬性控制遮罩層顯示與否，后來就出現(xiàn)了這樣的問題：
這就說明 #inkToWork 所在的a標(biāo)簽的內(nèi)容還未渲染出來，那找這個(gè)元素就找不到，也就沒法實(shí)現(xiàn)點(diǎn)擊，一開始控制遮罩層的變量為true，但是里面的內(nèi)容渲染不出來，后來解決了好久，也是不行。
解決
后來晚上開會的時(shí)候說了這個(gè)問題，才發(fā)現(xiàn)這個(gè)問題真的挺好解決的，但是自己鉆牛角尖了，之前一直以為src加的是文件，現(xiàn)在才知道能加鏈接，也是當(dāng)時(shí)文檔沒看太明白吧，后來就改成了這個(gè)樣子：
退出預(yù)覽
感謝各位的閱讀！關(guān)于“遮罩層+Iframe如何實(shí)現(xiàn)界面自動顯示”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
網(wǎng)站題目：遮罩層+Iframe如何實(shí)現(xiàn)界面自動顯示
URL網(wǎng)址：
http://weahome.cn/article/pscipp.html
重慶分公司
重慶分公司
