简易div+js+css实现动态弹出层教程

需积分: 3 83 浏览量更新于2024-09-18 收藏 3KB TXT 举报

本文档主要介绍了如何使用HTML、CSS和JavaScript实现一个简单的弹出层功能。在现代网页开发中，弹出层是一种常见的交互设计，通常用于显示通知、对话框或模态窗口。以下是从提供的代码中提炼的关键知识点： 1. **HTML结构**： - 使用了`<!DOCTYPE html>`声明文档类型，遵循的是XHTML 1.0 Transitional规范。 - `html`元素是文档的根元素，`xmlns`属性设置了XML命名空间。 - 在`<head>`部分，`meta`标签定义了字符集为UTF-8，确保文本正确显示。`<title>`标签设置页面标题，这里是"㲢(eq)"。 2. **CSS样式**： - 定义了全局样式规则，如body和html元素的高度为2000px，去除默认的margin和padding。 - 设置了字体样式和大小，以及元素居中和边距。 - `#overlay`是半透明黑色背景的遮罩层，用于隐藏底层内容。通过`position: fixed`使其相对于浏览器窗口定位，并设置透明度。 - `#win`是弹出层的容器，位置居中，大小为400x200像素，带有白色背景和红色边框，显示和隐藏由JavaScript控制。 3. **CSS选择器和伪类**： - 使用了`:hover`伪类来为`h2`元素内的`span`添加鼠标悬停效果。 - `h2`元素具有右对齐、18像素高度，底部有3像素实线边框，并允许用户拖动。 4. **JavaScript**： - `window.onload`事件处理函数在页面加载完成后执行。 - 使用`getElementById`方法获取`#win`元素的引用。 - 变量`shit`是一个布尔值，这里可能用于某种条件判断或逻辑处理，但具体含义未在提供的代码中体现。 - 通过JavaScript控制弹出层的显示和隐藏，`display`属性的变化用于实现这一功能。这段代码演示了如何利用基本的HTML、CSS和JavaScript创建一个简单的弹出层组件，适用于各种轻量级的网站交互需求。通过调整样式和JavaScript，可以进一步定制弹出层的外观、大小、动画效果以及响应用户的交互行为。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层并可拖拽</title>
<style>
body,html{height:2000px;}
body,div,h2{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}
*html #overlay{position:absolute;}
#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}
h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;}
h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}
</style>
<script>
window.onload = function ()
{
var shit = !-[1, ];
var oWin = document.getElementById("win");
var oLay = document.getElementById("overlay");
var oBtn = document.getElementsByTagName("button")[0];
var oClose = document.getElementById("close");
var oH2 = oWin.getElementsByTagName("h2")[0];
var bDrag = false;
var disX = disY = 0;
var iScrollT = document.documentElement.scrollTop || document.body.scrollTop;
var iScrollL = document.documentElement.scrollLeft || document.body.scrollLeft;

下载后可阅读完整内容，剩余2页未读，立即下载

yueleichideshou

粉丝: 3
资源: 22

简易div+js+css实现动态弹出层教程

div+css 弹出层

div+css弹出层带关闭按钮

js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框

js控制div+css弹出层实现拖拽

js+div+css弹出层.txt

css弹出层代码分享

div_css_js弹出层有遮罩

DIV+CSS+JS 变灰弹出层

DIV弹出层代码

js+div+css超酷多种弹出层 兼容各大浏览器

最新资源

js弹出框 javascript弹出框 div+css弹出层效果弹出登录框

js+div+css超酷多种弹出层兼容各大浏览器