遮罩层DEMO

最新推荐文章于 2022-02-13 16:46:29 发布
转载 最新推荐文章于 2022-02-13 16:46:29 发布 · 806 阅读 · 0
文章标签：

#function #border #xhtml #div #button #filter

来自：http://my.oschina.net/u/246503/blog/42330

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #brg
        {
            width: 100%;
            height: 100%;
            background: #333;
            position: absolute;
            top: 0;
            left: 0;
            filter: alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #showdiv
        {
            width: 100%;
            height: auto;
            position: absolute;
            left: 300px;
            top: 150px;
            z-index: 330;
            display: none;
        }
        #testdiv
        {
            width: 800px;
            height: auto;
            margin: 0 0;
            border: 1px solid #4d4d4d;
            background: #f2f2f2;
        }
        #close
        {
            width: 200px;
            height: 27px;
            line-height: 27px;
            font-size: 14px;
            font-weight: bold;
            border: 1px solid #4d4d4d;
            text-align: center;
            cursor: pointer;
            margin: 0 auto;
            background: #333;
            color: #fff;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var bheight = document.body.clientHeight;
            $("#btnAdd").click(function() {
                $("#brg").css("display", "block");
                $("#showdiv").css("display", "block");
                $("#brg").css("height", document.body.scrollHeight);
                $("#showdiv").css("top", document.body.scrollTop + 100);
            });
            $("#close").click(function() {
                $("#brg").css("display", "none");
                $("#showdiv").css("display", "none");
            });
        });
    </script>

</head>
<body>
    <button id="btnAdd">
        button</button>
    this is the test
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <!-- 遮罩层DEMO-->
    <div id="brg">
    </div>
    <div id="showdiv">
        <div id="close">
            关闭
        </div>
        <div id="testdiv">
            要显示的内容
        </div>
    </div>
    <!-- END遮罩层DEMO-->
</body>
</html>


 

DIV层遮罩-demo
09-27
DIV层遮罩，简单功能实现，代码不规范，随便写的
android 自定义相机，Camera和camera2.TextureView，相机遮罩层demo
05-09
android 自定义相机，Camera和camera2.TextureView，相机遮罩层demo
遮罩层的小demo，拿来即用
阅读之后，对你有帮助，那就点个赞再走吧
06-14 378
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{padding: 0; margin: 0} /*遮罩层*/ ...
遮罩层
半块菠萝的博客
11-29 280
页面内放俩div，一个用来全屏变灰，一个用来显示弹出的框<div id="myDiv"style="left: 0px; top: 0px; width: 3000px; height: 1000px; display: none; position: absolute; z-index: 60;background-color: gray;opacity:0.5; filter:A
Winform应用程序实现通用遮罩层二
何晓龙的博客
03-05 1079
之前先后发表过：《Winform应用程序实现通用遮罩层》、《Winform应用程序实现通用消息窗口》，这两款遮罩层其实都是基于弹出窗口的，今天为大家分享一个比较简单但界面相对友好的另一种实现方案，废话不多说，直接进入主题。 一、实现思路（解决问题顺序）： 透明遮罩： 1.实现可设置透明的Panel控件（MaskPanel）； 2.Panel控件（MaskPanel）能够覆盖父容器（一般是当
js+css点击弹出遮罩层图片放大展示demo
07-05
综上所述，这个"js+css点击弹出遮罩层图片放大展示demo"通过结合JavaScript和CSS的力量，实现了优雅的图片放大查看功能，为用户带来了更直观、更具沉浸感的浏览体验。在实际项目中，可以根据需求进行调整和优化，以...
微信浏览器内显示遮罩层提示点击右上角
01-29
本文将详细探讨如何实现“微信浏览器内显示遮罩层提示点击右上角，选择在浏览器中打开链接”的功能，以及相关技术要点。 首先，我们需要理解微信内置浏览器（X5内核）的工作原理。微信浏览器是基于腾讯自家的X5 ...
微信小程序demo：选课投票，遮罩层、统计图
03-15
功能并不完整，但是这个创意有点厉害啊。。。这个创意让我想到了facebook的创始人在大学时搞的课程小程序，互相可以查看对方的选课。。。 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权...
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
10-21
本文主要介绍了如何使用jQuery来实现一个带有遮罩层效果的blockUI弹出层。这种弹出层通常用于需要在用户进行某些操作时，暂停页面的其他交互，并且提示用户正在执行某项操作。通过在本文中提供的示例代码和demo源码...
c# winForm遮罩层
weixin_38172370的博客
02-13 990
其实就是窗体一个窗体，黑色底，透明度30%最好，每次弹窗先new 遮罩层窗体。 .show(); 或者.Hide(); 在弹窗窗体关闭时间别忘记关闭或者隐藏遮罩窗体，要不点不了
界面遮罩层例子
03-25
NULL 博文链接：https://zhaoshijie.iteye.com/blog/1163704
winform实现遮罩层效果
08-27
在winform中实现的遮罩层效果
WinForm特效桌面上的遮罩层
01-04
WinForm特效桌面上的遮罩层.自己做的，蛮有意思的。
Winform应用程序实现通用遮罩层
07-07
这是一个Winform通用遮罩层，实现了类似WEB上的遮罩层，既可以透明，而且还可以显示动态图片以及文字。
全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮
08-07
全屏loading图有遮罩效果 当显示全屏loading图时无法操作页面上的按钮
添加遮罩层
weixin_41652466的博客
07-10 1878
// 打开遮罩 function maskIt(obj){ var hoverdiv = '&lt;div class="divMask" style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background: #EEEEEE;opacity: 0.5; filter: alpha(opa...
C#实现winform仿div+css半透明遮罩效果
weixin_33744141的博客
02-01 419
本文实现在winform项目实现网页div+css关透明效果，挺帅的，在网页中要实现div的半透明遮罩层效果不难，在winform项目就不是这么容易了，下面我们来看下效果图先：   正常时： 文章来自学IT网：http://www.xueit.com/html/2010-01-08/21-1076980691437.html 下面我们来实现上图的效果控件源码： using Sys...
有关DevExpress弹出窗体控件与ActiveX遮挡冲突的几点体会
hp231801的专栏
04-25 1490
最近一直忙着做Web开发，主要是结合第三方控件Developer Express来做。就我个人而言，无论是Web网页设计，还是第三方控件的使用，都处于学习的初级阶段，遇到了不少问题。其中最头疼的，就是在网页中嵌入的ActiveX插件，总是在最顶层显示，无论你如何操作，如何修改z-index属性，它就是如此霸道的呆在最顶层。      后来在网上也查了不少资料，这一问题主要就是ActiveX与HTML元素的显示冲突造成的，而解决这一问题的关键是IFrame元素的应用。（详情可看此处：http://
遮罩层的简单实现
MPFLY的博客
10-19 775
主要就是操作opacity这一属性。不透明度。 IE9以上, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。<!DOCTYPE html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值