div彈出效果css及js-css教學-PHP中文網

首頁

web前端

css教學

div彈出效果css及js

高洛峰

Nov 24, 2016 am 09:26 AM

div

直接上程式碼：
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(&#39;fade&#39;); 
 light.style.display=&#39;block&#39;; 
 fade.style.display=&#39;block&#39;; 
 } 
function hide(tag){ 
 var light=document.getElementById(tag); 
 var fade=document.getElementById(&#39;fade&#39;); 
 light.style.display=&#39;none&#39;; 
 fade.style.display=&#39;none&#39;; 
} 
 
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 
}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

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

div与span的区别有哪些Nov 02, 2023 pm 02:29 PM

区别有：1、div是一个块级元素，span是一个行内元素；2、div会自动占据一行，span则不会自动换行；3、div用于包裹比较大的结构和布局，span用于包裹文本或者其他行内元素；4、div可以包含其他块级元素和行内元素，span可以包含其他行内元素。

div盒模型是什么Oct 09, 2023 pm 05:15 PM

div盒模型是一种用于网页布局的模型，它将网页中的元素视为一个个矩形的盒子，这个模型包含了四个部分：内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距，通过调整内容区域、内边距、边框和外边距的大小，可以实现各种不同的布局效果，盒模型也提供了一些属性和方法，可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

iframe和div有什么不同Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用于引入外部内容，可以加载其他网站的内容或将一个网页分割成多个区域，每个区域有自己的独立的浏览上下文，而div主要用于分割和组织内容的区块，用于布局和样式控制。

如何将两个div并排显示Nov 01, 2023 am 11:36 AM

方法有：1、将两个div元素设置为“float:left;”属性；2、使用CSS的flex布局可以轻松实现元素的并排显示；3、使用CSS的grid布局也可以实现元素的并排显示。

css div内容超出隐藏怎么实现Jan 28, 2023 pm 03:12 PM

css div内容超出隐藏的实现方法：1、通过css代码“overflow: hidden;”实现内容超出隐藏；2、通过js代码“var myBox = document.getElementById('demo');var mydemoHtml = myBox.innerHTML.slice(0, 20) +'......';”实现内容超出隐藏即可。

如何在css中让div居中Oct 12, 2023 am 10:07 AM

在css中让div居中的方法有使用margin属性、flexbox布局、绝对定位和使用grid布局等。详细介绍：1、使用margin属性，最简单的方法是使用margin属性，通过设置左右margin为auto，可以将div水平居中；2、使用flexbox布局，Flexbox是CSS3中引入的一种弹性盒子布局模型，可以方便地实现元素的居中；3、使用绝对定位，通过使用绝对定位等等。

See all articles