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

原創

jason9157zb

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.本文參考原文

發表評論

所有評論

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

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

Python實現大麥網搶票的四大關鍵技術點解析

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

在Windchill中編寫rbInfo類型的資源文件,編譯過後:報在資源文件中找不到相應的Key

Windchill8.0中WTPartUsageLink的用法及介紹

Windchill8.0中使用高級查詢:根據Name查詢

在JSP頁面中導入標簽的兩種方式：

Struts 1.3.8 Action實現類中消息的輸出及JSP頁面中消息標簽的使用總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結