div+css實現簡單的彈出窗（背景變灰色）

阿新 • • 發佈：2019-01-26

自己做了一個網站，需要用到彈出框的功能，以前沒做過這個，就去網上查了下資料，然後試著寫了一個最簡單的彈出框效果。
需求：點選彈出框按鈕，在原頁面基礎上彈出一個彈出框，並且背景要變成灰色，原頁面不能被編輯知道關閉彈出框。
原理：在原頁面的基礎上新增兩個div，一個是彈出框，一個是彈出框後面的背景層（頁面變灰）。首先這兩個div是跟原頁面的程式碼在一起存放的，只不過使用了display：none這個css屬性先將其隱藏不顯示，在觸發彈出框效果時再使用display：block讓這兩個div顯示出來即可。
完整程式碼如下：

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Strict//EN' 'http://www.w3.org/TR/html4/strict.dtd'> 

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>div+css實現彈出層</title>
<style>

#popBox{
    position: absolute;
    display:none;
    width:300px;
    height:200px;
    left:40%;
    top:20%;
    z-index:11;
    background:#B8F764; 
} 


#popLayer{
    position: absolute;
    display:none;
    left:0;
    top:0;
    z-index:10;
    background:#DCDBDC;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);/* 只支援IE6、7、8、9 */
}

</style>
<script type="text/javascript">
    function popBox(){
        var popBox = document.getElementById('popBox' 
);
        var popLayer = document.getElementById('popLayer');

        popLayer.style.width = document.body.scrollWidth + "px";
        popLayer.style.height = document.body.scrollHeight + "px";

        popLayer.style.display = "block";
        popBox.style.display = "block";
    }//end func popBox()

    function closeBox(){
        var popBox = document.getElementById('popBox');
        var popLayer = document.getElementById('popLayer');

        popLayer.style.display = "none";
        popBox.style.display = "none";

    }//end func closeBox()

</script>
</head>
<body>

<input type="button" name="popBox" value="彈出框" onclick="popBox()" />

<div id="popLayer" >
    背景層  
</div>
<div id="popBox" >
    <div><a href="javascript:void(0)" onclick="closeBox()">關閉</a></div>
    <div>彈出框</div>
</div>

</body>
</html>

效果圖如下：
原頁面：

彈出框：
彈出框頁面

其他需要注意事項：1、兩個彈出層的上下位置；2、彈出的背景層的透明設定；
首先，兩個div都要使用position: absolute;這個屬性，然後使用z-index這個屬性可以設定層的上下順序，值越大越靠上顯示；
其次，背景透明需要使用濾鏡等功能，具體程式碼如下：
-moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);/* 只支援IE6、7、8、9 */
3、如果頁面高度超過螢幕高度，彈出的背景層只有螢幕大小，這是因為使用了position:absolute;的話高度width:100%;就無效了。解決辦法，使用js獲取頁面的寬度和高度進行設定。

div+css實現簡單的彈出窗（背景變灰色）

div+css實現簡單的彈出窗（背景變灰色）

DIV+CSS實現中間彈窗效果

jqury+css實現可彈出伸縮層

利用cookies實現對彈出窗口頻率的控制

jQuery實現簡單彈出視窗

DIV+IFrame實現頁面彈出視窗

Bootstrap之javascript插件---彈出框（模態框）Modal

使用JDBC實現簡單的寵物系統（增刪改查）

android 小米手機彈出框（自定義dialog）位置不居中解決方法

android 仿新聞閱讀器選單彈出效果（附原始碼DEMO）

bootstrap 4-標籤頁製作和彈出框（模態框）製作

自己動手實現簡單的事務管理（動態代理+註解）一

Android彈出Dialog使背景變暗的實現方式

promise實現公共彈框元件（非同步回撥）

自己動手實現簡單的事務管理（動態代理+註解）二

三層架構(MVC)實現簡單登陸註冊驗證（含驗證碼）

Android 自定義介面的彈出框（可輸入資料）

一、（1）C++ 實現簡單的線性表（順序儲存結構）

Android實現popupwindow彈出後螢幕背景變成半透明效果

matlab實現簡單BP神經網路（不使用工具箱），兩種求誤差方式

div+css實現簡單的彈出窗（背景變灰色）

相關推薦