欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JS實(shí)現(xiàn)彈出一個(gè)隱藏的div窗口body頁面變成灰色并且不可被編輯

 更新時(shí)間：2016年12月14日 09:38:27   作者：成兮  
這篇文章主要介紹了基于JS實(shí)現(xiàn)彈出一個(gè)隱藏的div窗口body頁面變成灰色并且不可被編輯的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

當(dāng)需要實(shí)現(xiàn)如下圖操作，點(diǎn)擊服務(wù)評(píng)分，出現(xiàn)一個(gè)服務(wù)評(píng)分窗口用來填入相關(guān)表單信息

這里寫圖片描述 

可是這會(huì)讓我們打開服務(wù)評(píng)分界面時(shí)還可以點(diǎn)擊body主界面中的購物車等鏈接，這是不對(duì)的，因此我們可以使用層疊樣式表來指定外圍的div的z-index低于當(dāng)前服務(wù)評(píng)分表單頁面，不能被點(diǎn)擊，如下:

/* 定義一個(gè)div用于覆蓋整個(gè)頁面，這個(gè)div的z-index大于body，小于服務(wù)評(píng)分div */
#temp{
  background-color: #000;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  z-index: 2;
  visibility: hidden;
}
/* 評(píng)分div，其z-index最大(當(dāng)顯示時(shí)) */
#mark{
 background-color: rgb(255,255,255);
 width: 400px;
 height: 250px;
 z-index: 3;
 visibility: hidden;
}
/* 包含了服務(wù)評(píng)分、購物車等的div */
#main{
 background-color: rgb(255,255,255);
 width: 100%;
 height: 100%;
 z-index: 1;
}
<div id="temp"></div>
<div id="mark"></div>
<div id="main"></div>
<a id="link"><i>點(diǎn)擊我進(jìn)行層疊</a>
<script>
 window.onload = function() {
  document.getElementById("link").onclick = function(){
   document.getElementById("temp").style.visibility = "visible";
   document.getElementById("mark").style.visibility = "visible";
  }
 }
</script>

效果圖如下:

這里寫圖片描述

以上所述是小編給大家介紹的基于JS實(shí)現(xiàn)彈出一個(gè)隱藏的div窗口body頁面變成灰色并且不可被編輯，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

  • Three.js開發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過程總結(jié)

    Three.js開發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過程總結(jié)

    這篇文章主要給大家介紹了關(guān)于利用Three.js開發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • TypeScript接口使用介紹

    TypeScript接口使用介紹

    接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應(yīng)該是抽象的，需要由具體的類去實(shí)現(xiàn)，然后第三方就可以通過這組抽象方法調(diào)用，讓具體的類執(zhí)行具體的方法
    2022-10-10
  • javascript彈出窗口實(shí)現(xiàn)代碼

    javascript彈出窗口實(shí)現(xiàn)代碼

    這篇文章主要介紹了javascript彈出窗口實(shí)現(xiàn)代碼，非常人性化的設(shè)計(jì)，點(diǎn)擊頁面可以彈出窗口，感興趣的小伙伴們可以參考一下
    2015-11-11
  • bootstrap fileinput 上傳插件的基礎(chǔ)使用

    bootstrap fileinput 上傳插件的基礎(chǔ)使用

    這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用，重點(diǎn)是把界面做得更加友好，更好的增加用戶體驗(yàn)。對(duì)bootstrap fileinput知識(shí)感興趣的朋友通過本文一起學(xué)習(xí)吧
    2017-02-02
  • Js參數(shù)RSA加密傳輸之jsencrypt.js的使用

    Js參數(shù)RSA加密傳輸之jsencrypt.js的使用

    這篇文章主要介紹了Js參數(shù)RSA加密傳輸之jsencrypt.js的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-02-02
  • 如何基于js判斷瀏覽器版本

    如何基于js判斷瀏覽器版本

    這篇文章主要介紹了如何基于js判斷瀏覽器版本,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • BootStrap 頁簽切換失效的解決方法

    BootStrap 頁簽切換失效的解決方法

    bootstrap開發(fā)標(biāo)簽頁時(shí)，標(biāo)簽頁顯示正常，但點(diǎn)擊時(shí)候?qū)?yīng)內(nèi)容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁簽切換失效的解決方法，感興趣的朋友一起看看吧
    2017-08-08
  • 本地圖片預(yù)覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗(yàn)總結(jié)

    本地圖片預(yù)覽(支持IE6/IE7/IE8/Firefox3)經(jīng)驗(yàn)總結(jié)

    遇到的本地圖片預(yù)覽的需求,IE6下可以直接從file的value獲取圖片路徑來顯示預(yù)覽,IE7和IE8下通過select獲取file的圖片路徑，再用濾鏡來顯示預(yù)覽，至于FireFox祥看本文吧，希望可以幫助到你
    2013-03-03
  • 下拉框select的綁定示例

    下拉框select的綁定示例

    根據(jù)文本綁定text、根據(jù)值綁定value，下面有個(gè)不錯(cuò)的示例，大家可以看看
    2014-09-09
  • 基于Bootstrap框架菜鳥入門教程(推薦)

    基于Bootstrap框架菜鳥入門教程(推薦)

    下面小編就為大家?guī)硪黄贐ootstrap框架菜鳥入門教程(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09

最新評(píng)論