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

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

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

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

应该这样：

需要注意的是这几个参数的意思：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>

样式是这样的：

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

赞 (0)

相关推荐

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • js点击按钮实现带遮罩层的弹出视频效果

    js点击按钮实现带遮罩层的弹出视频效果

    本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

  • JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU

  • JS实现新浪微博效果带遮罩层的弹出框代码

    JS实现新浪微博效果带遮罩层的弹出框代码

    本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码.分享给大家供大家参考.具体如下: 这是一款新浪微博效果的弹出框,现成的JS代码,兼容IE6+,以及各主流浏览器.新浪微博弹出层并可拖拽,操作轻松舒适,符合用户的浏览习惯,将代码推荐给各位网友. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-zzxg-dlg-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • 弹出最简单的模式化遮罩层的js代码

    假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

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

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

    点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1.遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧: 应该这样: 需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2.半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代码show <!docty

  • 使用jQuery制作遮罩层弹出效果的极简实例分享

    客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西.这种效果在网上很常见,例如:QQ空间浏览相册等.这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了Demo. HTML 结构 首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示.那么我们的 H

  • js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

    用JS写出遮罩层登陆框和对联广告并自动跟随滚动条滚动保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

    本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

  • js实现弹框效果

    本文实例为大家分享了js实现弹框效果的具体代码,供大家参考,具体内容如下 js实现弹窗效果 利用display来控制弹窗的现实和隐藏 <!-- 弹出层 --> <div id="popLayer"></div> <!--黑色蒙版 --> <div id="popBox"> <div class="close"> X </div> <div> <!

  • js鼠标悬浮出现遮罩层的方法

    本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl">          <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008

  • JS实现定时自动关闭DIV层提示框的方法

    本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

  • 微信小程序实现弹框效果

    本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下 先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo

  • 微信小程序自定义弹框效果

    本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml <!-- 取消订单按钮 --> <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view> <!-- 取消订单弹框 --> <view cla

随机推荐