编程 Javascript

js+html5实现半透明遮罩层弹框效果

Posted in Javascript onAugust 24, 2020

点击按钮，出现半透明遮罩层弹框，说说自己之前发过的愁吧

1、遮罩层半透明了弹框也跟着半透明了就像这样绝望吧

是哪里错了呢？你的css是这样写的吧：

js+html5实现半透明遮罩层弹框效果

应该这样：

js+html5实现半透明遮罩层弹框效果

需要注意的是这几个参数的意思：RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明

2、半遮罩层里面的内容可以上下滑动感觉挺好玩的 /笑哭

修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦

接下来就是代码show

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }

 .tip{
 text-align: center;
 position: absolute;
 height: 100%;
 width: 100%;
 background-color: rgba(90, 90, 90, 0.5);
 z-index: 99999;
 }
 
 .collectSucc{
 position: fixed;
 height: auto;
 width: 70%;
 background-color: #ffffff;
 margin-left: 15%;
 margin-top: 50%;
 }
 
 .collectSucc_top{
 color: #666666;
 font-size: 12px;
 }
 
 .collectSucc_top img{
 width: 60px;
 margin-top: 20px;
 }
 
 .collectSucc_buttom{
 margin-top: 20px;
 height: 40px;
 line-height: 40px;
 background-color: #2d99f5;
 color: #FFFFFF;
 font-size: 13px;
 }
 </script>
 
 </head>

 <body>
 <div class="tip">
 <!--收款成功-->
 <div class="collectSucc">
 <div class="collectSucc_top">
 <img src="../../img/tip.png" />
 <div>抢单失败，试试其他行程吧！</div>
 </div>
 <div class="collectSucc_buttom">
 我知道了
 </div>
 </div>
 </div>
 你好 我叫欧琪 啊哈哈 
 
 </body>

</html>

样式是这样的：

js+html5实现半透明遮罩层弹框效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js+html5实现半透明遮罩层弹框效果

- Author -

ouqi_qiou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

让您的菜单不离网站

Oct 03 Javascript

JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题

Aug 12 Javascript

Javascript中正则表达式的全局匹配模式分析

Apr 26 Javascript

JavaScript实现找出字符串中第一个不重复的字符

Sep 03 Javascript

jQuery中height()方法用法实例

Dec 24 Javascript

简介JavaScript中的getSeconds()方法的使用

Jun 10 Javascript

Javascript基础_简单比较undefined和null 值

Jun 14 Javascript

微信小程序小程序制作及动画（animation样式）详解

Jan 06 Javascript

Bootstrap table使用方法总结

May 10 Javascript

详解如何配置vue-cli3.0的vue.config.js

Aug 23 Javascript

vue 表单之通过v-model绑定单选按钮radio

May 13 Javascript

ElementUI radio组件选中小改造

Aug 12 Javascript

Vue Spa切换页面时更改标题的实例代码

Jul 15 #Javascript

Vue应用部署到服务器的正确方式

Jul 15 #Javascript

js+html5实现侧滑页面效果

Jul 15 #Javascript

angular2 ng build部署后base文件路径问题详细解答

Jul 15 #Javascript

Angular2关于@angular/cli默认端口号配置的问题

Jul 15 #Javascript

js编写简单的计时器功能

Jul 15 #Javascript

深入理解angular2启动项目步骤

Jul 15 #Javascript

You might like

杏林同学录(七)

2006/10/09 PHP

用来给图片加水印的PHP类

2008/04/09 PHP

彻底杜绝PHP的session cookie错误

2009/08/09 PHP

php 面向对象的一个例子

2011/04/12 PHP

浅析iis7.5安装配置php环境

2015/05/10 PHP

Yii 框架入口脚本示例分析

2020/05/19 PHP

js获取图片长和宽度的代码

2009/11/24 Javascript

Jquery实现页面加载时弹出对话框代码

2013/04/19 Javascript

Javascript表单验证要注意的事项

2014/09/29 Javascript

原生js实现返回顶部缓冲效果

2017/01/18 Javascript

利用node.js本地搭建HTTP服务器

2017/04/19 Javascript

Angular2安装angular-cli

2017/05/21 Javascript

angular2中Http请求原理与用法详解

2018/01/11 Javascript

浅谈node.js 命令行工具(cli)

2018/05/10 Javascript

js jquery 获取某一元素到浏览器顶端的距离实现方法

2018/09/05 jQuery

vue项目搭建以及全家桶的使用详细教程(小结)

2018/12/19 Javascript

JS数组方法push()、pop()用法实例分析

2020/01/18 Javascript

JavaScript进阶（三）闭包原理与用法详解

2020/05/09 Javascript

three.js 利用uv和ThreeBSP制作一个快递柜功能

2020/08/18 Javascript

JS canvas实现画板和签字板功能

2021/02/23 Javascript

[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4

2018/06/05 DOTA

Python进行数据提取的方法总结

2016/08/22 Python

利用python实现数据分析

2017/01/11 Python

Python获取当前路径实现代码

2017/05/08 Python

Linux RedHat下安装Python2.7开发环境

2017/05/20 Python

CentOS 6.5下安装Python 3.5.2（与Python2并存）

2017/06/05 Python

Redis使用watch完成秒杀抢购功能的代码

2018/05/07 Python

使用python生成杨辉三角形的示例代码

2018/08/29 Python

python多进程使用及线程池的使用方法代码详解

2018/10/24 Python

python for 循环获取index索引的方法

2019/02/01 Python

在pytorch中动态调整优化器的学习率方式

2020/06/24 Python

创业计划书中包含的9个方面

2013/12/26 职场文书

医学院校毕业生自荐信范文

2014/01/01 职场文书

记者岗位职责

2014/01/06 职场文书

项目经理助理岗位职责

2015/04/13 职场文书

python+opencv实现目标跟踪过程

2022/06/21 Python