用js+html+css实现自定义弹窗

最新推荐文章于 2021-05-31 07:05:32 发布

甜甜甜露啦

最新推荐文章于 2021-05-31 07:05:32 发布

阅读量1.5k

点赞数 1

分类专栏： html、css基础知识文章标签： javascript css html

本文链接：https://blog.csdn.net/tttlulu/article/details/104696683

版权

本文介绍了如何使用JavaScript、HTML和CSS来实现一个自定义弹窗功能。通过控制div的display属性，实现在界面上动态显示和隐藏弹窗，同时在div内进行样式和效果设计。

摘要由CSDN通过智能技术生成

最近按照CSDN上博主自定义弹出框的代码，终于实现了自己想要的弹出框。并将它们记录下来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/simplecss.css"/>
		<style type="text/css">
			.box1{
				height: 620px;
				border: 1px solid #ccc;
				background-color: #CCCCCC;
			}
			.box2{
				height: 620px;
				border: 1px solid white;
				text-align: center;
				line-height: 500px;
			}
			.title{
				text-align:center;
				margin-top: 2px;
			}
			.bottom{
				text-align: center;
				margin-top: 552px;
			}
			/*弹出框出现后的整体背景样式*/
			.light_content{
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background: black;
				z-index: 1001;
				opacity: 0.5;
				filter: alpha(opacity=60);
			}
			/*弹出框的样式*/
			.box{
				display: none;
				position: abso

最低0.47元/天解锁文章

甜甜甜露啦

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用js+html+css实现自定义弹窗

最近按照CSDN上博主自定义弹出框的代码，终于实现了自己想要的弹出框。并将它们记录下来。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css...
复制链接

扫一扫

专栏目录