遮罩層+Iframe如何實(shí)現(xiàn)界面自動(dòng)顯示-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)遮罩層+Iframe如何實(shí)現(xiàn)界面自動(dòng)顯示的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到陽谷網(wǎng)站設(shè)計(jì)與陽谷網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋陽谷地區(qū)。

效果

在教師評(píng)閱作業(yè)時(shí)，先把學(xué)生的作業(yè)展現(xiàn)出來，然后關(guān)掉界面進(jìn)行評(píng)分
（用百度主頁做演示）

Iframe

iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁，實(shí)現(xiàn)它的方法有多種：

URL 指向隔離頁面的位置，由于當(dāng)時(shí)對(duì)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è)根本看不全，需要拖動(dòng)底部和側(cè)欄的滾動(dòng)條。

Iframe + 遮罩層

遮罩層就是為了把下方的界面擋起來，然后讓ifream的內(nèi)容顯示在遮罩層上，以實(shí)現(xiàn)全屏顯示學(xué)生作業(yè)內(nèi)容的效果，代碼如下：

 
點(diǎn)擊查看

  
  退出預(yù)覽