2019-10-27 seo達(dá)人
開(kāi)發(fā)工具與關(guān)鍵技術(shù)：Adobe Dreamweaver CC
作者：黃燦
撰寫(xiě)時(shí)間：2019.1.16
在模仿華為官方網(wǎng)頁(yè)的練習(xí)當(dāng)中我發(fā)現(xiàn)華為官網(wǎng)中有一個(gè)遮罩層是隨便點(diǎn)擊遮罩層的背景也能關(guān)閉掉遮罩層，但唯獨(dú)點(diǎn)擊內(nèi)容區(qū)域不會(huì)關(guān)閉掉遮罩層。于是我開(kāi)始模仿這個(gè)寫(xiě)案例，連內(nèi)容也一模一樣（因?yàn)檫@個(gè)練習(xí)就是要寫(xiě)出和華為關(guān)一樣的效果或則比它更好的效果），一開(kāi)始我是這樣子寫(xiě)的（圖1）
圖1
class=Select_Region_bj 我給了一個(gè)灰色半透明的背景樣式，后來(lái)在Javascript中寫(xiě)onclick事件無(wú)論這么寫(xiě)，點(diǎn)擊內(nèi)容區(qū)也是會(huì)關(guān)閉掉遮罩層。我百思不得其解到底怎么樣寫(xiě)才能點(diǎn)擊內(nèi)容區(qū)不會(huì)關(guān)閉遮罩層，后來(lái)下課期間我看見(jiàn)我同學(xué)他寫(xiě)的帶能點(diǎn)擊內(nèi)容區(qū)不會(huì)關(guān)閉遮罩層。我問(wèn)他你是這么寫(xiě)的，他告訴我：“把他們分離就可以的了?！蔽宜伎剂艘粫?huì)，腦補(bǔ)：分離？怎么分離？補(bǔ)著補(bǔ)著補(bǔ)著就補(bǔ)出了背景和內(nèi)容區(qū)分離。分離寫(xiě)（圖2）
圖2
把背景層和內(nèi)容區(qū)分開(kāi)來(lái)寫(xiě)，不要在背景層中包裹內(nèi)容，這樣子點(diǎn)擊內(nèi)容區(qū)就不會(huì)關(guān)閉掉遮罩層了！
藍(lán)藍(lán)設(shè)計(jì)( m.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gerard.com.cn