关于前端自动弹窗页面

最新推荐文章于 2024-08-09 07:15:08 发布

phpcui

最新推荐文章于 2024-08-09 07:15:08 发布

阅读量2k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/phpcui/article/details/51615085

版权

这篇博客展示了一个前端自动弹窗页面的实现，使用了layer插件。当用户点击‘点击弹出’按钮时，会显示一个包含预约成功信息的弹窗，包括预约号和后续操作提示。此外，提供了layer插件的链接供进一步了解。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>您已成功免费预约</title>
<style>
*{ margin:0px; padding:0px;}
/*弹出css开始*/
.layer_box { display:none; width:500px; height:500px; background:#FFFFFF; margin:0px auto; text-align:center; font-family: Microsoft YaHei;}
.layer_box h2,.layer_box h3,.layer_box h4 {font-size: 100%; font-weight: 500;}
.layer_icon { padding-top:56px; padding-bottom:38px;}
.layer_icon span{ display:block; background:url(layer/layer_icon.png) no-repeat center center; width:88px; height:88px; margin:0px auto;}
.layer_box h2,.layer_box h3 { font-size:26px; color:#171717;}
.layer_box h3 span { color:#0f95da;}
.layer_box h4 { font-size:24px; padding-top:44px;}
.layer_box h4 cite { color:#e9130e;font-style:normal;}
.layer_info { padding-top:60px; color:#7a7a7a;}
.layer_info a { color:#e9130e;}
/*弹出css结束*/
</style>
</head>

<body><br>
<br>
<div id=