HTML+CSS实现带按钮的弹出框
带按钮的弹出框
- HTML部分
- CSS样式
- JS部分
- 效果图
- 补充知识:关于rgba属性
HTML部分
<button id="showPopup" onclick="showPopup()">弹出</button><div id="overlay"><div class="popup"><p class="popup_title">提示</p><p class="popup_content">学会制作弹出框了吗?</p><div class="popup_btn"><button class="cancelBtn" onclick="hidePopup()">取消</button><button class="confirmBtn" onclick="hidePopup()">确认</button></div></div></div>
CSS样式
/* 遮罩层 */#overlay {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;font-size: 16px;/* IE9以下不支持rgba模式 */background-color: rgba(0, 0, 0, 0.5);/* 兼容IE8及以下 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);display: none;}/* 弹出框主体 */.popup {background-color: #ffffff;max-width: 400px;min-width: 200px;height: 240px;border-radius: 5px;margin: 100px auto;text-align: center;}/* 弹出框的标题 */.popup_title {height: 60px;line-height: 60px;border-bottom: solid 1px #cccccc;}/* 弹出框的内容 */.popup_content {height: 50px;line-height: 50px;padding: 15px 20px;}/* 弹出框的按钮栏 */.popup_btn {padding-bottom: 10px;}/* 弹出框的按钮 */.popup_btn button {color: #778899;width: 40%;height: 40px;cursor: pointer;border: solid 1px #cccccc;border-radius: 5px;margin: 5px 10px;color: #ffffff;background-color: #337ab7;}
JS部分
function showPopup(){var overlay = document.getElementById("overlay");overlay.style.display = "block";}function hidePopup(){var overlay = document.getElementById("overlay");overlay.style.display = "none";}
效果图
补充知识:关于rgba属性
rgba()属性是CSS3新增属性。rgba含义:r代表red,g代表green,b代表blue,a代表透明度。rgba(0, 0, 0, 0.5)表示透明度为0.5的黑色。
IE8及以下版本不支持rgba属性,但是支持
filter
属性,因此可以利用filter实现透明度。
filter属性原本是做渐变的,
startColorstr
与endColorstr
参数值形式为#AARRGGBB
,其中AA代表透明程度,RRGGBB就是颜色的十六进制代码。rgba透明值与IEfilter值对应关系如下表所示。
rgba透明度 | IEfilter值 |
---|---|
0.1 | 19 |
0.2 | 33 |
0.3 | 4C |
0.4 | 66 |
0.5 | 7F |
0.6 | 99 |
0.7 | B2 |
0.8 | C8 |
0.9 | E5 |
参考文章:
https://blog.csdn.net/u012503639/article/details/82285404.
https://blog.csdn.net/liona_koukou/article/details/52807050.
HTML+CSS实现带按钮的弹出框相关推荐
- css关闭窗口按钮的代码,JS+CSS实现带关闭按钮DIV弹出窗口的方法
这篇文章主要介绍了JS+CSS实现带关闭按钮DIV弹出窗口的方法,实例分析了div弹出层窗口的实现技巧,非常具有实用价值,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS+CSS实现带关 ...
- qt自定义按钮类,每个按钮自带一个右键弹出框,如何使同一时刻只显示一个弹出框
提要 继承于QPushButton的自定义按钮类,其右键弹出一个弹框,创建多个这样的自定义按钮在窗口中,每一时刻只显示一个右键弹出框,避免同一时刻,多个按钮右键弹出弹出框后,未及时关闭弹出框导致的同一 ...
- JavaScript:原生js写的一个多按钮Popover 弹出框
效果如图 需求:点击按钮弹出,如果不进行其他操作则弹出层延时消失,点击另一个按钮时清楚其他弹窗 思路:先完成一个具有弹出层的按钮的样式,使用伪元素定位到按钮上方,加入定时器使其自动消失,当点击另一个按 ...
- AlertDialog,安卓自带取消确认按钮的弹出框
private void showMyDialog(){AlertDialog.Builder builder = new AlertDialog.Builder(context);builder.s ...
- [js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了
引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定 取消按钮可选 调用方法: 1 P ...
- mootools系列:打造属于你自己的Popup(弹出框)——扩展功能篇
为弹出框(Popup)添加"关闭(×)"按钮 如弹出框结构代码所示,关闭按钮标示"×"是放置在一div中的.使其具有关闭整个弹出框的功能,只要在创建该div时, ...
- swal如何加入html语言,前端基础(九):SweetAlert(弹出框)
简介 SweetAlert是一款很好用的弹出框框架 下载 导入 博主用的是bootstrap-sweetalert,所以要依赖bootstrap,导入前先导入原生jQuery以及bootstrap 基 ...
- alert 弹出框的操作
1.Alert对象:是Selenium WebDriver中专门处理弹出框的一种对象,这种对象我们不需要导入它,也不需要实例化,只需要调用切换对象的alert属性就可以获得该对象实例. 2.切换到弹 ...
最新文章
- 令人迷惑的ATT的jmp:直接跳转和间接跳转 [转]
- 用python实现点阵屏_MicroPython拼插编程实例:点亮心形8x8点阵
- 【CV】多目标跟踪:监控领域你必须要了解的算法
- Python二级笔记(4)
- pip 安装 scipy 出现错 no lapack/blas resources
- weblogic 文件服务器,weblogic配置文件服务器
- nginx缓存页面后,串会话问题的解决方案(转)
- php json_encode options,json_encode($json,$option) 对变量进行 JSON 编码说明
- c++时间片轮转rr进程调度算法_「学习笔记」时间片轮转(RR)调度算法(详解版)...
- OPPO推送:推送消息的字串,用于参数
- linux sokit使用方法,【sokit TCP/UDP 数据包收发测试(调试)工具怎么用】sokit TCP/UDP 数据包收发测试(调试)工具好不好_使用技巧-ZOL软件百科...
- lintcode java_Lintcode-java版本
- 电脑和开发板如何串口连接
- JAVA后端应该学什么技术?
- 03虚幻4 场景中的基础光源和视觉效果
- PS-制作燃烧的字体
- 广义线性模型到底是个什么鬼?
- Apache虚拟主机相关配置
- 树莓派配置环境细节(JDK+pycharm+miniconda+pyqt5+opencv-python)
- 企业微信收款码快速开通方法
热门文章
- mmdetection解决 ImportError: cannot import name ‘deform_conv_cuda’
- 按漏洞的攻击途径分类情况分析
- Learning to Compare: Relation Network 源码调试
- ubuntu18.04向日蔡远程软件安装失败
- 软件需求可测试性,软件需求管理与可跟踪性
- 陈建文个人简介:特斯拉进军手机界
- 苹果cms10自适应免费好看带直播的橙色模板
- python利用STMP发送gmail、QQ邮件错误及笔记总结
- 基于4G DTU和工业4G路由器的互联网+智慧物流解决方案
- jis拉伸试棒图纸_拉伸试棒延伸率快速测量装置制造方法