整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          在Vue開(kāi)發(fā)中出現(xiàn)對(duì)話(huà)框被遮罩層擋住問(wèn)題的解決教程

          Vue的開(kāi)發(fā)中,一旦我們用到對(duì)話(huà)框,經(jīng)常出現(xiàn)的問(wèn)題是對(duì)話(huà)框被遮罩層擋住,無(wú)論是Element-UI dialog還是bootstrap的Modal,如下圖所示:

          造成這個(gè)問(wèn)題的原因是對(duì)話(huà)框組件的父元素的position有fixed或者relative值,比較簡(jiǎn)單易行的辦法如下:對(duì)于bootstrap Modal需要添加css語(yǔ)句

          .modal-backdrop { z-index: -1;}

          而對(duì)于Element UI該組件已經(jīng)在屬性層面提供了解決辦法,只要添加:modal-append-to-body="false"就可以了。

          我們開(kāi)發(fā)的時(shí)候,經(jīng)常會(huì)遇得到一些網(wǎng)站,頭部和尾部一毛一樣,這樣頭部尾部相同的網(wǎng)站,怎么都不可能把頭部和尾部重新書(shū)寫(xiě)一遍吧,不僅浪費(fèi)時(shí)間還顯示的是自己的網(wǎng)站代碼重復(fù)率比較多,顯示自己沒(méi)有水平。下面長(zhǎng)沙前端培訓(xùn)班分享:iframe中的二級(jí)菜單被遮蓋怎么辦:

          解決這個(gè)問(wèn)題首先需要我們經(jīng)常會(huì)把這樣重復(fù)的頭部和尾部都單獨(dú)提出來(lái),制作成一個(gè)獨(dú)立的網(wǎng)頁(yè),然后通過(guò)iframe框架進(jìn)行引入。如果公共頭部中有對(duì)應(yīng)的一級(jí)導(dǎo)航和二級(jí)菜單導(dǎo)航的胡被遮住這可怎么解決呢?

          各種網(wǎng)站和各種公眾號(hào)上面方法使用了js,但是js比較麻煩,并且代碼粘貼下來(lái)使用的時(shí)候會(huì)出現(xiàn)問(wèn)題,跑不起來(lái),接下來(lái)由我提供給你們一個(gè)簡(jiǎn)單快速高效的解決問(wèn)題辦法。那叫一個(gè)so easy;并且關(guān)鍵代碼也給出了注釋喲,值得你來(lái)查看。問(wèn)題代碼:

          (一)公共頭部----帶有二級(jí)菜單

          HTML源碼

          <!-- 這里是頭部logo區(qū)域 -->

          <div class="box">這里是logo</div>

          <!-- 通欄和導(dǎo)航 -->

          <div class="layout">

          <ul>

          <li>你好

          <ul>

          <li>你好1</li>

          <li>你好2</li>

          <li>你好3</li>

          </ul>

          </li>

          <li>我好

          <ul>

          <li>我好1</li>

          <li>我好2</li>

          <li>我好3</li>

          <li>我好4</li>

          </ul>

          </li>

          <li>大家好

          <ul>

          <li>大家好1</li>

          <li>大家好2</li>

          </ul>

          </li>

          <li>勇哥

          <ul>

          <li>勇哥1</li>

          <li>勇哥2</li>

          <li>勇哥3</li>

          </ul>

          </li>

          <li>真的

          <ul>

          <li>真的1</li>

          <li>真的2</li>

          <li>真的3</li>

          <li>真的4</li>

          <li>真的5</li>

          </ul>

          </li>

          <li>很帥

          <ul>

          <li>真的1</li>

          <li>真的2</li>

          <li>真的3</li>

          <li>真的4</li>

          <li>真的5</li>

          </ul>

          </li>

          <li>好帥啊

          <ul>

          <li>真的1</li>

          <li>真的2</li>

          <li>真的3</li>

          <li>真的4</li>

          <li>真的5</li>

          </ul>

          </li>

          <li>太帥了

          <ul>

          <li>真的1</li>

          <li>真的2</li>

          <li>真的3</li>

          <li>真的4</li>

          <li>真的5</li>

          </ul>

          </li>

          <li>真的哦

          <ul>

          <li>真的1</li>

          <li>真的2</li>

          <li>真的3</li>

          <li>真的4</li>

          <li>真的5</li>

          </ul>

          </li>

          <li>結(jié)束了

          <ul>

          <li>真的1</li>

          <li>真的2</li>

          <li>真的3</li>

          <li>真的4</li>

          <li>真的5</li>

          </ul>

          </li>

          </ul>

          </div>

          CSS源碼

          <style>

          *{margin:0;padding:0}

          ul{list-style:none}

          a{text-decoration: none;}

          img{vertical-align: middle;}

          .box{

          width:1000px;

          height:100px;

          background-color: pink;

          margin:0 auto;

          font-size:50px;

          font-weight: bold;

          text-align: center;

          line-height: 100px;

          }

          .layout{

          height:60px;

          background-color:cornflowerblue;

          }

          .layout>ul{

          width: 1000px;

          margin: 0 auto;

          height:60px;

          }

          .layout>ul>li{

          font-size:14px;

          float: left;

          width:100px;

          text-align: center;

          line-height: 60px;

          border-right:1px dashed white;

          box-sizing: border-box;

          color:white

          }

          .layout>ul>li:last-child{

          border-right:0px

          }

          .layout>ul>li>ul{

          background-color: pink;

          color:white;display: none;

          }

          .layout>ul>li:hover>ul{

          display: block;

          position: relative;

          }

          /* 取消滾動(dòng)條 */

          ::-webkit-scrollbar{

          display: none;

          }

          </style>

          效果:

          (二)公共主體----需要引入頭部

          HTML源碼

          <!-- 引入頭部 -->

          <iframe id="one" src="01-header.html" frameborder="0" width="100%" height="160px"frameborder="0"></iframe>

          <!-- 獨(dú)立主體 -->

          <div class="tip" wmode="transparent">

          我是獨(dú)立的頁(yè)面主體部分

          </div>

          <!-- 引入尾部 -->

          <iframe src="03-footer.html" frameborder="0" frameborder="0" width="100%" height="100px"frameborder="0"></iframe>

          CSS源碼

          *{margin:0;padding:0}

          .tip{

          height:500px;

          background-color: yellowgreen;

          text-align: center;

          line-height: 500px;

          font-size:80px;

          font-weight:bold;

          }

          /*取消3像素間距*/

          iframe{vertical-align: middle;}

          /*取消滾動(dòng)條*/

          ::-webkit-scrollbar{

          display: none;

          }

          效果:

          問(wèn)題所在

          描述:引入公共的頭部之后,二級(jí)菜單,被主體區(qū)域內(nèi)容給遮蓋住了,使用js實(shí)現(xiàn)起來(lái)也是非常的困難的;

          解決問(wèn)題:描述如下

          將在主體引入的頭部頁(yè)面中,引入的順序改變一下,放在主體的后面;放在主體后面的話(huà)加載順序就會(huì)出現(xiàn)問(wèn)題,主體就會(huì)顯示在主體后面。那如何調(diào)整順序問(wèn)題呢?使用固定定位,定位在引入頁(yè)面的最上面,但是定位后也會(huì)把布局遮蓋住,如何解決遮蓋主體的問(wèn)題呢,就是需要給主體添加margin-top;來(lái)解決問(wèn)題,這樣二級(jí)菜單就能顯示出來(lái)了

          修改后的主體代碼:HTML

          <!-- 獨(dú)立主體 -->

          <div class="tip" wmode="transparent">

          我是獨(dú)立的頁(yè)面主體部分

          </div>

          <!-- 引入頭部 -->

          <iframe id="one" src="01-header.html" frameborder="0" width="100%" height="160px"frameborder="0"></iframe>

          <!-- 引入尾部 -->

          <iframe src="03-footer.html" frameborder="0" frameborder="0" width="100%" height="100px"frameborder="0"></iframe>

          效果:加載順序

          修改代碼:CSS

          <style>

          *{margin:0;padding:0}

          .tip{

          height:500px;

          background-color: yellowgreen;

          text-align: center;

          line-height: 500px;

          font-size:80px;

          font-weight:bold;

          /*修改的代碼*/

          margin-top:160px

          }

          iframe{vertical-align: middle;}

          ::-webkit-scrollbar{

          display: none;

          }

          /*修改的代碼*/

          #one{

          position:fixed;

          top:0px;

          width:100%;

          height:500px;

          }

          </style>

          效果:

          以上就是:通過(guò)HTML和CSS來(lái)解決,iframe二級(jí)菜單被遮住的效果:關(guān)鍵代碼就是調(diào)整順序,和添加定位。

          相關(guān)文章

          果在圖片上顯示文字,經(jīng)常會(huì)遇到這個(gè)情況,就是當(dāng)文字和背景顏色差不多時(shí),文字會(huì)看不清楚,我們一般通過(guò)給文字加text shadow或者修改圖片的透明度來(lái)讓文字顯示更加突出。我們今天說(shuō)一下透明度的問(wèn)題,一般我們干這個(gè)活兒是通過(guò)photoshop來(lái)做,其實(shí)CSS本身也可以實(shí)現(xiàn)類(lèi)似的效果。如何做?

          咱們先從下面這個(gè)例子開(kāi)始,有一張背景圖片,上面有些文字:

          對(duì)應(yīng)的顯示效果如下:

          可以看到,文字顯示不是特別清晰,現(xiàn)在要給圖片增加一層控制透明度,我們使用偽元素實(shí)現(xiàn):

          可以看到,加入了一層,inset是top, bottom, left, right的簡(jiǎn)寫(xiě)形式,將它們都設(shè)為0。通過(guò)這個(gè)設(shè)置,顯示效果如下:

          現(xiàn)在它把所有元素都蓋住了,而我們需要文字在這層的上面,如果加入z-index:-1, 則這個(gè)層又跑到所有元素下面,看不到了。

          要解決這個(gè)問(wèn)題,我們需要引入一個(gè)關(guān)鍵CSS,isolation: isolate; 通過(guò)它來(lái)創(chuàng)建一個(gè)新的CSS堆疊上下文,從而使得這個(gè)層不會(huì)跑到外面,具體關(guān)于isolation, 我專(zhuān)門(mén)寫(xiě)過(guò)一個(gè)文章,這里可以直接查看詳細(xì)信息:使用isolation: isolate來(lái)創(chuàng)建堆疊上下文

          可以看到,這個(gè)層現(xiàn)在位于文字和圖片中間,如下所示:

          那現(xiàn)在就簡(jiǎn)單了,可以更改opacity來(lái)控制其透明度,

          最后將顏色改為黑色,就達(dá)到了我們所期望的效果。

          附上完整的CSS:

          感謝閱讀!


          主站蜘蛛池模板: 不卡无码人妻一区三区音频| 亚洲中文字幕无码一区| 日韩精品福利视频一区二区三区| 91视频一区二区| 精品国产一区二区三区四区| 国产激情一区二区三区小说| 又紧又大又爽精品一区二区| 国产一区二区三区高清视频| 国产激情视频一区二区三区| 麻豆果冻传媒2021精品传媒一区下载| 日韩视频在线一区| 国产精品亚洲产品一区二区三区| 国产在线不卡一区二区三区| 精品视频一区二区三区四区| 精品在线一区二区| 精品国产亚洲一区二区三区| 男人的天堂av亚洲一区2区| 视频一区在线播放| 文中字幕一区二区三区视频播放| 成人精品一区二区三区电影| 不卡无码人妻一区三区音频| 欧美日韩一区二区成人午夜电影 | 日韩十八禁一区二区久久| 国产午夜三级一区二区三| 精品爆乳一区二区三区无码av| 无码毛片一区二区三区视频免费播放| 日本不卡在线一区二区三区视频| 无码一区二区三区在线| 亚洲色精品aⅴ一区区三区| 51视频国产精品一区二区| 国产精品免费大片一区二区| 麻豆AV无码精品一区二区| 99精品国产一区二区三区| 亚洲综合激情五月色一区| 熟女性饥渴一区二区三区| 亚洲精品精华液一区二区 | 国产精品第一区第27页| 亚洲国产一区二区三区在线观看| 香蕉视频一区二区| 无码喷水一区二区浪潮AV| 久久一区二区精品综合|