编程 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 相关文章推荐

JavaScript类和继承 this属性使用说明

Sep 03 Javascript

MooBox 基于Mootools的对话框插件

Jan 20 Javascript

jQuery中读取json文件示例代码

May 10 Javascript

jquery弹出框的用法示例(2)

Aug 26 Javascript

JS控制表格实现一条光线流动分割行的方法

Mar 09 Javascript

jquery图片切换实例分析

Apr 15 Javascript

JS实现的3D拖拽翻页效果代码

Oct 31 Javascript

移动端日期插件Mobiscroll.js使用详解

Dec 19 Javascript

Node.js学习教程之HTTP/2服务器推送【译】

Oct 31 Javascript

js中apply和Math.max()函数的问题及区别介绍

Mar 27 Javascript

详解VUE自定义组件中用.sync修饰符与v-model的区别

Jun 26 Javascript

JS实现倒序输出的几种常用方法示例

Apr 13 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

PHP 基于Yii框架中使用smarty模板的方法详解

2013/06/13 PHP

PHP 读取大文件的X行到Y行内容的实现代码

2013/06/24 PHP

php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串

2020/04/05 PHP

jQuery 树形结构的选择器

2010/02/15 Javascript

jQuery源码分析之Event事件分析

2010/06/07 Javascript

StringTemplate遇见jQuery冲突的解决方法

2011/09/22 Javascript

JQuery触发事件例如click

2013/09/11 Javascript

JavaScript splice()方法详解

2020/09/22 Javascript

js中string转int把String类型转化成int类型

2014/08/13 Javascript

AngularJS equal比较对象实例详解

2016/09/14 Javascript

详解JS中遍历语法的比较

2017/04/07 Javascript

JavaScript运动框架多值运动（四）

2017/05/18 Javascript

基于ionic实现下拉刷新功能

2018/05/10 Javascript

浅谈Node框架接入ELK实践总结

2019/02/22 Javascript

[02:14]DOTA2英雄基础教程修补匠

2013/12/23 DOTA

[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29

2020/10/29 DOTA

Python3搜索及替换文件中文本的方法

2015/05/22 Python

numpy自动生成数组详解

2017/12/15 Python

Python构建网页爬虫原理分析

2017/12/19 Python

Python操作mongodb的9个步骤

2018/06/04 Python

pyqt5的QComboBox 使用模板的具体方法

2018/09/06 Python

python程序变成软件的实操方法

2019/06/24 Python

Python jieba库用法及实例解析

2019/11/04 Python

使用Django和Postgres进行全文搜索的实例代码

2020/02/13 Python

Python join()函数原理及使用方法

2020/11/14 Python

Python爬取你好李焕英豆瓣短评生成词云的示例代码

2021/02/24 Python

出纳岗位职责范本

2013/12/01 职场文书

运动会闭幕式解说词

2014/02/21 职场文书

优秀语文教师事迹

2014/05/18 职场文书

机械专业求职信范文

2014/07/15 职场文书

日语系毕业求职信

2014/07/27 职场文书

警察群众路线整改措施

2014/09/26 职场文书

开会通知

2015/04/20 职场文书

Nginx的rewrite模块详解

2021/03/31 Servers

python flask开发的简单基金查询工具

2021/06/02 Python

Spring Boot 排除某个类加载注入IOC的操作

2021/08/02 Java/Android