基于JS實現彈出一個隱藏的div窗口body頁面變成灰色并且不可被編輯
更新時間：2016年12月14日 09:38:27 作者：成兮
這篇文章主要介紹了基于JS實現彈出一個隱藏的div窗口body頁面變成灰色并且不可被編輯的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
當需要實現如下圖操作，點擊服務評分，出現一個服務評分窗口用來填入相關表單信息
可是這會讓我們打開服務評分界面時還可以點擊body主界面中的購物車等鏈接，這是不對的，因此我們可以使用層疊樣式表來指定外圍的div的z-index低于當前服務評分表單頁面，不能被點擊，如下:
/* 定義一個div用于覆蓋整個頁面，這個div的z-index大于body，小于服務評分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;
}
/* 包含了服務評分、購物車等的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實現彈出一個隱藏的div窗口body頁面變成灰色并且不可被編輯，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要給大家介紹了關于利用Three.js開發(fā)實現3D地圖的實踐過程，文中通過示例代碼介紹的非常詳細，對大家學習或者使用three.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
接口是一系列抽象方法的聲明，是一些方法特征的集合，這些方法都應該是抽象的，需要由具體的類去實現，然后第三方就可以通過這組抽象方法調用，讓具體的類執(zhí)行具體的方法2022-10-10
這篇文章主要介紹了javascript彈出窗口實現代碼，非常人性化的設計，點擊頁面可以彈出窗口，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎使用，重點是把界面做得更加友好，更好的增加用戶體驗。對bootstrap fileinput知識感興趣的朋友通過本文一起學習吧2017-02-02
這篇文章主要介紹了Js參數RSA加密傳輸之jsencrypt.js的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了如何基于js判斷瀏覽器版本,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
bootstrap開發(fā)標簽頁時，標簽頁顯示正常，但點擊時候對應內容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁簽切換失效的解決方法，感興趣的朋友一起看看吧2017-08-08
本地圖片預覽(支持IE6/IE7/IE8/Firefox3)經驗總結
遇到的本地圖片預覽的需求,IE6下可以直接從file的value獲取圖片路徑來顯示預覽,IE7和IE8下通過select獲取file的圖片路徑，再用濾鏡來顯示預覽，至于FireFox祥看本文吧，希望可以幫助到你2013-03-03
根據文本綁定text、根據值綁定value，下面有個不錯的示例，大家可以看看2014-09-09
下面小編就為大家?guī)硪黄贐ootstrap框架菜鳥入門教程(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09