Html遮罩层的显示(主要在于样式设置)

<html>
<head>
     <title></title>
     <style type="text/css">
         #divshow
         {
             position: fixed;  /*相对于浏览器窗口进行定位*/
             left: 0px;
             top: 0px;
             width: 100%;
             height: 100%;
             opacity:0.6;       /* 透明度*/
             background:red;
             display:none;
             position:absolute;   /*相对定位*/
             z-index:999;
         }
     </style>
     <script type="text/javascript">
         function myfunction() {
             document.getElementById("divshow").style.display = "block"
         }
     </script>
</head>
<body>
    <div style=" left:0px; top:0px; width:100%; height:100%;">
       <input type="button" id="btn" value="你好！" onclick="myfunction()" />
    </div>
    <div id="divshow">
        <div style=" width:300px; height:200px; left:50%; top:50%; position:relative; background-color:Gray; margin-left:-150px; margin-top:-100px;" >你妹的</div>
    </div>
</body>
</html>

时间： 2024-11-09 00:00:46

Html遮罩层的显示(主要在于样式设置)的相关文章

弹窗和遮罩层的显示隐藏及空白区域关闭

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Commpatible" content="IE=edge"> <title>HTML遮罩层</title> <style> body{ backgroun

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

Jquery超简单遮罩层实现代码

看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: [html] view plain copy print? <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opa

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览源码下载使用方法使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

ios遮罩层的简单使用

/** 大图 */ - (IBAction)bigImg { //1.添加按钮遮罩层 UIButton *cover=[[UIButton alloc] init]; cover.frame=self.view.bounds; cover.backgroundColor=[UIColor blackColor]; cover.alpha=0.0; [cover addTarget:self action:@selector(smallImg) forControlEvents:UIControl

java javaScript实现遮罩层动态加载

通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关代码,只显示可以出现功能的最少代码). 第一:效果图为第二:实现如上效果的代码为 1:遮罩层css代码 <style type="text/css">#load{position:fixed; top: 0px; right:0px; bottom:0px;filter: a

纯js制作遮罩层对话框 -- g皓皓

//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> func

jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框

最近封装上瘾,想起以前做的一个轻巧的弹出框,是样式和脚本分离的,于是重新封装了一下,把样式标签统一到js里了. 里面还有一些问题,但不影响使用,有兴趣的同学,可以参考完善下,有好的建议,请不吝赐教. var PopDialogDefaultConfig = { hasCover: true, //是否带遮罩层 colorOfCover: "#000", //遮罩层颜色 transparencyOfCover: 80, //遮罩层透明度(alpha值,opacity值通过换算得到) bo