超好看前端css美化弹窗

最新推荐文章于 2024-08-12 11:00:42 发布

好吃的粽子

最新推荐文章于 2024-08-12 11:00:42 发布

阅读量3.5k

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_55410737/article/details/125653026

版权

本文介绍了如何使用CSS对原生弹窗进行美化，提供了一款可自定义标题、内容和按钮样式的弹窗解决方案。

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

原生弹窗不好看？种类少？

那就用这款可自定义的css美化弹窗。

弹窗标题，内容，按钮都可自定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script>
		function show(){
		  document.getElementById("Ground").style.display="block";
		}
		function conceal(){
		    document.getElementById("Ground").style.display="none";
		}
	</script>
	<style>
		.ground{
			display: none;
			
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			width: 400px;
			height: 250px;
			border-radius: 20px;
			border: 2p