基于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)文章

JS+CSS實現(xiàn)TreeMenu二級樹形菜單完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)TreeMenu二級樹形菜單,以完整實例形式較為詳細的分析了JS二級樹形菜單的節(jié)點元素操作技巧,非常簡單實用,需要的朋友可以參考下
2015-09-09
.html文件防止script腳本緩存的三種方法
現(xiàn)在有這樣一個問題,由于一些原因,我們經(jīng)常需要修改gTool的代碼然后上傳更新cdn,但是用戶通過 html 文件訪問的 gTool 鏈接實際上還是緩存的,所以現(xiàn)在問題就是如何禁止緩存,文中給大家介紹了三個方法供大家參考,需要的朋友可以參考下
2024-01-01
JS關(guān)閉窗口時產(chǎn)生的事件及用法示例
這篇文章主要介紹了JS關(guān)閉窗口時產(chǎn)生的事件及用法,結(jié)合關(guān)閉窗口時提交評論的實例分析了javascript事件觸發(fā)機制及遮罩層實現(xiàn)技巧,需要的朋友可以參考下
2016-08-08
基于jQuery通過jQuery.form.js插件使用ajax提交form表單
在jQuery Form插件可以讓你很容易的使用AJAX提交Form表單，主要方法ajaxForm和ajaxSubmit負責收集表單元素的信息,管理提交進程。這兩種方法都是可配置的,讓你完全控制Form提交，本篇文章介紹基于jQuery通過jQuery.form.js插件使用ajax提交form表單，需要的朋友可以參考下
2015-08-08
JS 控件事件小結(jié)
事件對于控件來說至關(guān)重要，控件的消息通信機制使用事件的成本最低，但是對于JS控件來說有一些麻煩需要解決，JS類本身不支持事件，DOM模型支持的事件僅適應(yīng)于瀏覽器的DOM節(jié)點。所以創(chuàng)建一套事件是我們寫控件之前要做的
2012-10-10
利用JS屏蔽頁面中的Enter按鍵提交表單的方法
下面小編就為大家?guī)硪黄肑S屏蔽頁面中的Enter按鍵提交表單的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript中EventLoop介紹
本篇文章給大家詳細介紹了JavaScript中EventLoop的相關(guān)知識，有這方面需要的朋友參考學習下。
2018-01-01
JavaScript 事件流、事件處理程序及事件對象總結(jié)
JS與HTML之間的交互通過事件實現(xiàn),事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間,可以使用(或處理程序)來預(yù)定事件,以便事件發(fā)生時執(zhí)行相應(yīng)的代碼,本文將介紹JS事件相關(guān)的基礎(chǔ)知識,
2017-04-04
vue iView 上傳組件之手動上傳功能
iView 主要服務(wù)于 PC 界面的中后臺業(yè)務(wù)，是一套高質(zhì)量的開源 UI 組件庫。這篇文章主要介紹了iView 上傳組件之手動上傳功能,需要的朋友可以參考下
2018-03-03
javascript讀取xml
javascript讀取xml...
2006-11-11