快捷導(dǎo)航

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

更新時(shí)間：2016年12月14日 09:38:27 作者：成兮

這篇文章主要介紹了基于JS實(shí)現(xiàn)彈出一個(gè)隱藏的div窗口body頁(yè)面變成灰色并且不可被編輯的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

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

這里寫(xiě)圖片描述

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

/* 定義一個(gè)div用于覆蓋整個(gè)頁(yè)面，這個(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)分、購(gòu)物車(chē)等的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>

效果圖如下:

這里寫(xiě)圖片描述

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

您可能感興趣的文章:

相關(guān)文章

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