div彈出效果css及js
直接上程式碼：
html程式碼：
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>testdiv</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.php1.cn/">
<script src="div.js" type="text/javascript"></script>
</head>
<body>
<a href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> <div id="light" class="white_content">
<div class="close"><a href="http://www.php1.cn/"> <div class="con">
问题描述：<input type="text" /><br>
问题类型：<select ><option value="1">1</option><option value="2">2</option></select><br>
意见描述：<input type="text"/>
</div>
</div>
<div id="light2" class="white_content">
<div class="close"><a href="http://www.php1.cn/"> <div class="con">
content2
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>js程式碼：
Js代码
function show(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
}
function hide(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
css代码：
Js代码
* {
margin:0;
padding:0
}
html, body {
height: 100%;
width: 100%;
font-size:12px
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 30%;
padding: 6px 16px;
border: 12px solid #D6E9F1;
background-color: white;
z-index:1002;
overflow: auto;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#f5f5f5;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.close {
float:right;
clear:both;
width:100%;
text-align:right;
margin:0 0 6px 0
}
.close a {
color:#333;
text-decoration:none;
font-size:14px;
font-weight:700
}
.con {
text-indent:1.5pc;
line-height:21px
}
ok
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
css怎麼實作div缺一個角
Jan 30, 2023 am 09:23 AM
css實作div缺少一個角的方法：1、建立一個HTML範例文件，並定義一個div；2、給div設定寬高背景色；3、給需要刪除一角的div增加一個偽類，將偽類設定成跟背景色一樣的顏色，然後旋轉45度，再定位到需要去除的那個角落即可。
基於 ChatGPT API 的劃詞翻譯瀏覽器腳本實現
May 01, 2023 pm 03:28 PM
前言最近GitHub上有個基於ChatGPTAPI的瀏覽器腳本，openai-translator，短時間內star衝到了12k，功能上除了支援翻譯外，還支援潤飾和總結功能，除了瀏覽器插件外，還使用了tauri打包了一個桌面客戶端，那拋開tauri是使用rust部分，那瀏覽器部分實作還是比較簡單的，今天我們就來手動實作一下。 openAI提供的介面例如我們可以複製以下程式碼，在瀏覽器控制台中發起請求，就可以完成翻譯//範例constOPENAI_API_KEY="s
iframe和div有什麼不同
Aug 28, 2023 am 11:46 AM
iframe和div的不同是iframe主要用於引入外部內容，可以載入其他網站的內容或將一個網頁分割成多個區域，每個區域有自己的獨立的瀏覽上下文，而div主要用於分割和組織內容的區塊，用於佈局和样式控制。
div盒模型是什麼
Oct 09, 2023 pm 05:15 PM
div盒模型是用於網頁佈局的模型，它將網頁中的元素視為一個個矩形的盒子，這個模型包含了四個部分：內容區域、內邊距、邊框和外邊距。 div盒模型的好處是可以輕鬆控制網頁佈局和元素之間的間距，透過調整內容區域、內邊距、邊框和外邊距的大小，可以實現各種不同的佈局效果，盒模型也提供了一些屬性和方法，可以透過CSS和JavaScript來動態地改變盒子的樣式和行為。
div與span的差別有哪些
Nov 02, 2023 pm 02:29 PM
差異有：1、div是一個區塊級元素，span是一個行內元素；2、div會自動佔據一行，span則不會自動換行；3、div用於包裹比較大的結構和佈局，span用於包裹文字或其他行內元素；4、div可以包含其他區塊級元素和行內元素，span可以包含其他行內元素。
jQuery技巧：掌握在div中新增標籤的方法
Feb 23, 2024 pm 01:51 PM
標題：jQuery技巧：掌握在div中新增標籤的方法在網頁開發中，經常會遇到需要動態新增標籤到頁面中的情況。使用jQuery可以方便地操作DOM元素，實現快速的標籤添加功能。本文將介紹如何使用jQuery在div中新增標籤的方法，並附上具體的程式碼範例。 1.準備工作在使用jQuery之前，需要在頁面中引入jQuery庫，可以透過CDN連結引入，也可以下載到本
如何將兩個div並排顯示
Nov 01, 2023 am 11:36 AM
方法有：1、將兩個div元素設定為「float:left;」屬性；2、使用CSS的flex佈局可以輕鬆實現元素的並排顯示；3、使用CSS的grid佈局也可以實現元素的並排顯示。
jQuery加入div元素的簡單方法
Feb 19, 2024 pm 09:03 PM
簡單易懂的jQuerydiv元素新增技巧jQuery是前端開發中常用的JavaScript庫之一，它提供了方便的操作DOM元素的方法，能夠快速地實現頁面元素的新增、刪除、修改等功能。在使用jQuery時，我們經常需要操作div元素，以下將介紹一些簡單易懂的div元素新增技巧，並提供具體的程式碼範例。 1.建立並新增一個新的div元素
