超好看前端css美化弹窗

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

那就用这款可自定义的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: 2px solid #fff;background: #fff;margin: auto;position: absolute;top: -200px;left: 0;right: 0;bottom: 0;}.ground1{position: relative;}.headline{margin: auto;position: absolute;top: 10px;left: 175px;right: 0;bottom: 0;}.text{margin: auto;position: absolute;top: 110px;left: 50px;right: 0;bottom: 0;}.yes,.no{border: 2px solid #87cefa;background: #87cefa;border-radius: 11px;width: 65px;height: 38px;font-size: 17px;}.yes{margin: auto;position: absolute;top: 420px;left: 140px;right: 0;bottom: 0;}.no{margin: auto;position: absolute;top: 420px;left: 290px;right: 0;bottom: 0;}button:hover{border: 2px solid #ffdd55;}</style><body><div class="ground" id="Ground"><div class="ground1"><div class="headline"><h2 id="Headline">提示</h2></div><div class="text"><p id="Text">提示内容</p></div><div class="button1"><button class="yes" onclick="conceal()" id="Button1">确定</button><button class="no" onclick="conceal()" id="Button2">取消</button></div></div></div></body><button onclick="show()">显示</button></html>

超好看前端css美化弹窗相关推荐

前端html+css+js弹窗的实现
近期由于项目需要,学习了一下js弹窗的实现,感觉挺简单的. html代码部分: <!doctype html> <html lang="en"> <h ...
10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计打开blog文件夹的urls.py文 ...
Form 表单详解：案例、CSS 美化
本文要点: 常见表单表单的性质表单CSS美化使用 radio 实现 Tab 选项卡什么是表单用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
咸鱼前端—CSS初识
咸鱼前端-CSS初识 CSS的发展历程 CSS 网页的美容师 CSS初识引入CSS样式表(书写位置) CSS样式规则 CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它 ...
html5搜索框美化,CSS美化的漂亮搜索框
CSS美化的漂亮搜索框我要搜索搜索 var $ = function(id){return document.getElementById(id);} var formSubmit = funct ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

超好看前端css美化弹窗

超好看前端css美化弹窗相关推荐

最新文章

热门文章