亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

這里寫圖片描述 

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

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

效果圖如下:

這里寫圖片描述

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

相關(guān)文章

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

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

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

    TypeScript接口使用介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

    下拉框select的綁定示例

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

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

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

最新評論