原生CSS，實現點擊按鈕出現交互彈窗【新手掃盲】

原創 夏2同学 2020-06-20 18:59

效果圖：

在這裏插入圖片描述

實現原理：

  1. 將彈窗內容寫在一個div裏面，設置display屬性爲none
  2. 按鈕點擊綁定事件，將上述div的display屬性改爲block

HTML代碼

	<body>
		<p>示例彈出頁：
			<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
				請點這裏
			</a>
		</p>
		<div id="light" class="white_content">
			<div id="font_login">Login in</div>
			<!-- 登陸部分代碼 -->
			<form action="" method="post" id="form_submit">
				賬號：<input type="text" name="" id="name" value="" /></br>
				密碼：<input type="password" name="" id="password" value="" /></br>
				<input type="button" value="確認" class="button_beautiful ceshi" /> <!-- 不要點擊 -->
				<input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" />
			</form>
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>

CSS代碼：

			.black_overlay {
				display: none;
				/* 此元素不會被顯示*/
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: #bbbbbb;
				z-index: 1001;
				/* z-index 屬性設置元素的堆疊順序。*/
				opacity: .80;
				/* opacity 屬性設置元素的不透明級別。*/
			}

			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				border: 1px solid #bbbbbb;
				border-radius: 20px;
				background-color: white;
				z-index: 1002;
				/*層級要比.black_overlay高，這樣才能顯示在它前面*/
				overflow: auto;
			}

			#light {
				position: absolute;
				left: 50%;
				/* top: 50%; */
				width: 300px;
				height: 250px;
				margin-left: -150px;
				/* margin-top: -125px */;
			}

			#form_submit {
				text-align: center;
				margin-left: 10px;
				margin-top: 10px;
			}

			#font_login {
				font-weight: 400;
				font-size: 24px;
				color: #BBBBBB;
				text-align: center;
				margin-top: 20px;
			}

			.button_beautiful {
				width: 60px;
				height: 34px;
				/* 高度 */
				border-width: 0px;
				border-radius: 6px;
				background: #4ECDC4;
				cursor: pointer;
				outline: none;
				color: white;
				font-size: 16px;
				margin-top: 20px;
			}
		</style>

全部代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.black_overlay {
				display: none;
				/* 此元素不會被顯示*/
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: #bbbbbb;
				z-index: 1001;
				/* z-index 屬性設置元素的堆疊順序。*/
				opacity: .80;
				/* opacity 屬性設置元素的不透明級別。*/
			}

			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				border: 1px solid #bbbbbb;
				border-radius: 20px;
				background-color: white;
				z-index: 1002;
				/*層級要比.black_overlay高，這樣才能顯示在它前面*/
				overflow: auto;
			}

			#light {
				position: absolute;
				left: 50%;
				/* top: 50%; */
				width: 300px;
				height: 250px;
				margin-left: -150px;
				/* margin-top: -125px */;
			}

			#form_submit {
				text-align: center;
				margin-left: 10px;
				margin-top: 10px;
			}

			#font_login {
				font-weight: 400;
				font-size: 24px;
				color: #BBBBBB;
				text-align: center;
				margin-top: 20px;
			}

			.button_beautiful {
				width: 60px;
				height: 34px;
				/* 高度 */
				border-width: 0px;
				border-radius: 6px;
				background: #4ECDC4;
				cursor: pointer;
				outline: none;
				color: white;
				font-size: 16px;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<p>示例彈出頁：
			<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
				請點這裏
			</a>
		</p>
		<div id="light" class="white_content">
			<div id="font_login">Login in</div>
			<!-- 登陸部分代碼 -->
			<form action="" method="post" id="form_submit">
				賬號：<input type="text" name="" id="name" value="" /></br>
				密碼：<input type="password" name="" id="password" value="" /></br>
				<input type="button" value="確認" class="button_beautiful ceshi" /> <!-- 不要點擊 -->
				<input type="button" value="取消" class="button_beautiful" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" />
			</form>
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

ArkTS開發原生鴻蒙HarmonyOS短視頻應用

HarmonyOS實戰課程“2024鴻蒙零基礎快速實戰-仿抖音App開發（ArkTS版）”已經於今日上線至慕課網（https://coding.imooc.com/class/843.html），有致力於鴻蒙生態開發的同學們可以關注一下。

原創 2024-04-29 23:07:45

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（一）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-04-26 11:35:57

解鎖HDC 2024之旅：從購票到報名，全程攻略

本文分享自華爲雲社區《解鎖HDC 2024之旅：從購票到報名，全程攻略》，作者：華爲雲社區精選。 Hi，代碼界的小夥伴們，集結號已經吹響了！華爲開發者大會（HDC 2024）——這場匯聚了HarmonyOS NEXT鴻蒙星河版、盤古大模型5

原創 2024-04-30 22:34:35

O2OA開發平臺前端源碼級二次開發（Vue3,React）

在使用O2OA進行項目定製化開發時，我們可以開發新的前端組件（x_component）以擴展O2OA來實現更多的業務。這種新增前端組件或者前端業務的開發通常會配合後端自定義應用實現的服務來完成系統內數據的交互。在當系統默認的界面不符合系統

原創 2024-04-30 22:26:12

通義靈碼實戰系列：一個新項目如何快速啓動，如何維護遺留系統代碼庫？

作者：別象 進入 2024 年，AI 熱度持續上升，翻閱科技區的文章，AI 可謂是軍書十二卷，卷卷有爺名。而麥肯錫最近的研究報告顯示，軟件工程是 AI 影響最大的領域之一，AI 已經成爲了軟件工程的必選項，也有研究稱開發者每天的事務性工作可

原創 2024-04-30 21:12:20

Spring AI 搶先體驗，5 分鐘玩轉 Java AI 應用開發

作者：劉軍 Spring AI 是 Spring 官方社區項目，旨在簡化 Java AI 應用程序開發，讓 Java 開發者像使用 Spring 開發普通應用一樣開發 AI 應用。 Spring Cloud Alibaba AI 以 Spr

原創 2024-04-29 21:12:12

Haskell 實現京東優惠券爬取的詳細步驟解析

在當今的電商行業中，優惠券活動是吸引用戶的一種重要方式。京東作爲中國領先的電商平臺之一，其優惠券活動頻繁且多樣，爲用戶提供了豐富的購物體驗。然而，想要及時獲取最新的京東優惠券信息並非易事，尤其是在優惠券數量龐大的情況下。爲了解決這一問題，

原創 2024-04-28 23:27:18

Java word通過html設置樣式（Spire Docx）

  Java  word通過html設置樣式（Spire Docx） <dependencies>   <!-- Apache POI dependency for Word --> <dependency>

原創 2024-04-26 23:42:09

6個實例帶你解讀TinyVue 組件庫跨框架技術

本文分享自華爲雲社區《6個實例帶你解讀TinyVue 組件庫跨框架技術》，作者： 華爲雲社區精選。 在DTSE Tech Talk 《 手把手教你實現mini版TinyVue組件庫 》的主題直播中，華爲雲前端開發DTSE技術佈道師阿健老師給

原創 2024-04-26 10:33:20

從零開始學架構V2-架構設計流程-2

一、架構設計流程 架構的設計的是爲了降低整體的複雜性，那麼架構設計的第一步就是熟悉業務，識別其中的核心訴求，僅考慮技術的話就是識別複雜度。 1.1 識別複雜度 架構的複雜度主要來源於第一節中介紹的“高性能”“高可用”“可擴展”等幾個方面，實

原創 2024-04-25 23:56:26

使用前端技術創建 QR 碼生成器 API

前言 QR碼（Quick Response Code）是一種二維碼，於1994年開發。它能快速存儲和識別數據，包含黑白方塊圖案，常用於掃描獲取信息。QR碼具有高容錯性和快速讀取的優點，廣泛應用於廣告、支付、物流等領域。通過掃描QR碼，用戶可

原創 2024-04-25 22:23:53

前端面試題 - 元素的innerText outerText innerHTML的區別？

前端面試題 - 元素的innerText outerText innerHTML的區別？ innerText和outerText取值都是對象起始和結束標籤內部的文本內容。但是在設置的時候，outerText會把該標籤也替換掉。 inner

原創 2024-04-25 11:51:02

前端面試題 - 在HTML5中DOCTYPE的作用是什麼？標準與兼容模式（混雜模式）各有什麼區別？

前端面試題 - 在HTML5中DOCTYPE的作用是什麼？標準與兼容模式（混雜模式）各有什麼區別？ DOCTYPE（文檔類型聲明）是一種在HTML文檔中使用的標記，用於告訴瀏覽器使用哪個HTML版本解析文檔。它的作用是確保瀏覽器正確地渲染和

原創 2024-04-25 11:51:01

界面組件DevExpress中文教程 - 如何在Node.js應用中創建報表？

DevExpress Reporting是.NET Framework下功能完善的報表平臺，它附帶了易於使用的Visual Studio報表設計器和豐富的報表控件集，包括數據透視表、圖表，因此您可以構建無與倫比、信息清晰的報表。 獲取Dev

原創 2024-04-30 11:36:22

JavaScript開發工具WebStorm v2024.1全新發布——增強全行代碼補全功能

WebStorm 是jetbrains公司旗下一款JavaScript 開發工具，被廣大中國JS開發者譽爲"Web前端開發神器""強大的HTML5編輯器""智能的JavaSscript IDE"等。與IntelliJ IDEA同源，繼承了I

原創 2024-04-29 11:35:39