使用css和最少的javascript用div模拟弹出窗口（Lightbox, Greybox, Thickbox）

原創

2018-09-03 12:08

背景介绍：实现用最少的Javascript代码实现模拟窗口（以下称为：子页面），使父窗口（以下称为：父页面）不在激活中

实现思路：当触发弹出子页面DIV时，在父页面和子页面中间添加一个和父页面同样大小的DIV层，并调整其透明度；当关闭子页面时取消子页面并取消透明层

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>LIGHTBOX EXAMPLE</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style> </head> <body> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div> </body> </html>

参考文章：

1.Javascript实现步骤文章

2.本文参考原文

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

相關文章

我实现了客户要求的五彩斑斓的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

2020-07-08 10:39:04

【Python】CSS选择器语法

常用語法語法說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

2020-07-08 09:13:33

[转]css父元素背景覆盖其子元素背景，正常一般是子元素的背景会覆盖父元素的背景

原文：https://www.cnblogs.com/zouqin/p/5498495.html 問題：怎麼實現父元素的背景覆蓋子元素的背景呢？ ———————————————————————————— <!DOCTYPE htm

牛頓的小腦

2020-11-17 13:54:11

html+css 选项卡

<style type=text/css>td { font-size: 12px; color: #000000; line-heig

2020-07-08 12:23:28

position:absolute下，top:0,right:0,bottom:0,left:0 结合margin:auto的作用（让明确宽高的盒子水平垂直居中于父元素）

絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie

2020-07-08 11:55:42

css每日一报（自己积累平时写法）

1、pc端共用的樣式： *{padding:0px;margin:0px;outline:0 none; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-s

2020-07-08 11:54:55

vue开发的手机购物商城APP东京大药房(带数据库，定位，支付，等)

源碼下載就能上線,需要的注注,私信,

2020-07-08 11:50:38

原生JS实现树状结构列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？這篇文章會全面詳細的介紹樹狀結構列表的實現，從數據處理成樹狀結構，到動態生成dom節點渲染頁面。確定原始數據結構原始數據

2020-07-08 11:27:37

web前端复习第七课

二級導航實例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

2020-07-08 10:46:31

网页设计中常见的兼容性问题

常見兼容性問題 1、png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8. 2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 3、IE6

2020-07-08 10:28:29

CSS预处理器和后处理器

css預處理器一、什麼是css預處理器？ CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS

我的绝伦大人

2020-07-08 09:19:30

css剩余部分

一、link和@import的區別頁面中引入的方式有三種： 1.在行內定義style屬性 2.頁面頭部內嵌<style>標籤 3.通過link和@import鏈接樣式表 <link rel="styles

我的绝伦大人

2020-07-08 09:19:30

HTML+css做炫酷的3d盒子反转

3d盒子反戰效果如圖如下： HTML重要的代碼如下： <ul> <li> <div class="box"> <div class="front">目錄

2020-07-08 09:12:55

几个简单的css动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi

2020-07-08 08:40:28

css消息数量，圆圈数字，购物车数量。

html: <a href="index.html" class="nav">未讀留言<div class="nav-counter nav-counter-blue">4</div></a> css: .nav{

2020-07-08 07:33:49

24小時熱門文章

最新文章

最新評論文章