html遮罩层怎么写

1.HTML中如何使用遮罩层

第一步：新建一个html页面

页面中先做出一个【领红包】的按钮，如图（图中左侧是效果右侧是代码），点击这个按钮就会弹出一个红包的活动消息，即我们要的遮罩效果

css遮罩层怎么做

css遮罩层怎么做

第二步：做出遮罩层

遮罩层的作用就是将层后面的内容都遮住，覆盖全屏，所以：

宽高都设为：100%;

位置 position:absolute;left:0; top:0;

背景色 一般都设为透明的 background: rgba(0,0,0,0.5);

层的顺序 z-index:100； （设置一个比较大的数值）

css遮罩层怎么做

第三步：做出遮罩层上的内容

1、在遮罩层上添加活动效果图

2、关闭活动信息弹出框的【关闭】按钮

注意：遮罩层上的内容也要添加上z-index且数值要比遮罩层的大，z-index:101

如图（左侧效果，右侧代码）

css遮罩层怎么做

css遮罩层怎么做

第四步：用js实现遮罩效果演示

首先我们看到的页面上是没有遮罩层的，只有一个【领红包】的按钮在页面中；

然后我们点就【领红包】按钮，就弹出遮罩效果；再要关闭遮罩层时点击右上角的关闭按钮，就退出了遮罩成的活动信息。具体操作如下：

1、将遮罩层隐藏起来 display:none;

2、点击【领红包】时，遮罩层显示 display:block;

3、点击关闭按钮，遮罩层消失 display:none;

如图

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

css遮罩层怎么做

2.如何实现遮罩层

1/DTD/xhtml1-transitional.dtd"> "> <meta ; charset=utf-8" /> <style> /*遮罩层*/ #tinybox_1 { position:absolute; width:1002px; height:80px; background:#FFF; display: none; z-index: 99999; border:5px solid red; display:none; text-align:center; padding:10px } #tinybox_1 h4{ display:block; margin:0 auto; width:1002px; line-height:40px} .main{ width:98%; height:2000px; margin:0 auto; border:2px solid red; } </style> <！--遮罩 begin --> <script type="text/javascript"> function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}} function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}} function BtPopload(showId){ // 高度减去 4px，避免在页面无滚动条时显示遮罩后出现流动条 var h = (Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) - 4) + 'px'; var w = document.documentElement.scrollWidth + 'px'; var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;border:0"//遮罩背景 var rePosition_mask = function() { pop_Box.style.height = h; pop_Box.style.width = w; pop_Iframe.style.height = h; pop_Iframe.style.width = w; if (document.documentElement.offsetWidth < 950) { //防止正常宽度下点击时 在 ff 下出现页面滚动到顶部 document.documentElement.style.overflowX = "hidden"; } } var exsit = document.getElementById("popBox"); if (!exsit) { var pop_Box = document.createElement("div"); pop_Box.id = "popBox"; document.getElementsByTagName("body")[0].appendChild(pop_Box); pop_Box.style.cssText = popCss; pop_Box.style.zIndex = "10"; var pop_Iframe = document.createElement("iframe")； // 这里如果用 div 的话，在 ie6 不能把 遮住 pop_Iframe.id = "popIframe"; document.getElementsByTagName("body")[0].appendChild(pop_Iframe); pop_Iframe.style.cssText = popCss; pop_Iframe.style.zIndex = "9"; rePosition_mask(); } BtShow("popIframe"); BtShow("popBox"); BtShow(showId); var pop_Win = document.getElementById(showId); pop_Win.style.position = "absolute"; pop_Win.style.zIndex = "11"; var rePosition_pop = function() { pop_Win.style.top = document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.clientHeight/2 - pop_Win.offsetHeight/2 + 'px'; pop_Win.style.left = document.documentElement.scrollLeft + document.body.scrollLeft + document.documentElement.clientWidth/2 - pop_Win.offsetWidth/2 + 'px'; } rePosition_pop(); window.onresize = function(){ w = document.documentElement.offsetWidth + 'px'； // 使用 scrollWidth 不能改变宽度 rePosition_mask(); rePosition_pop(); } window.onscroll = function(){ rePosition_pop(); } } function BtPopShow(Bid,Did) { var UploadBtn = document.getElementById(Bid); if (Uploa。

3.如何在HTML上做一个固定的层遮挡网页中的控件

ie里可以用下面方法试试看.FireFox好像没有此类问题.

可以先判断浏览器类型如果是IE加一个透明的IFREAM

#iframe_show{

position: absolute;

top:0px;

left:0px;

width:100%;

height:100%;

z-index:0;

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)

}

#table_show{

position: absolute;

z-index:1;

}

<div>

<iframe frameborder=0 scrolling=no src="" id=iframe_show ></iframe>

<table id=table_show width=100% cellpadding=0 cellspacing=0 >

<tr>

<td>

<!-- +str+ -->

</td>

</tr>

</table>

</div>

4.js弹出的遮罩层,如何能遮住全屏

只需5个步骤就可以解决遮住全屏的问题。

1.打开UE编辑器，创建一个空白的HTML源文件和CSS源文件，如下图。

2.在个HTML文件中输入下列HTML代码，如下图参考。

3.在CSS文件中输入以下CSS代码，如下图。

4.编辑完成后，选择UTF8-noBOM模式保存文件，如下图。

5.在浏览器中打开HTML文件，您可以看到最终想要实现的遮住全屏效果，如下图。

5.请问有谁知道设计网页遮罩css跟html的代码怎么写 就是点击之后弹出

HTML:

<p class="shade"></p>

<div class="tanceng">

<p class="cue">；亲，活动还在继续，5月6日-5月8日抽奖，要累计50万以上才可参加哦~</p>

<p class="okbtn pt5">

<a href="javascript:void(0);">；确 定</a>

</p>

</div>

CSS:

.shade{

width: 100%;

background-color: rgba(0,0,0,0.3);

position: fixed;

left: 0;

top: 0;

display: none;

}

.tanceng{

background-color: #ffeb8d;

width: 240px;

padding: 20px;

line-height: 200%;

color: #f31b33;

position: fixed;

top: 20%;

left: 50%;

border-radius: 0.6rem;

margin-left: -140px;

display: none;

}

.okbtn a{

display: block;

width: 80%;

background-color: #f31b33;

color: #fff;

line-height: 250%;

font-size: 16px;

text-align: center;

border-radius: 5px;

margin:0 auto;

}

JS:

var webH = $(window).height();

//这里显示遮罩

$("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮

$(".shade,.tanceng").css("display","block");

$(".shade").height(webH);

$(".cue").html（"亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加哦~"）；

//这个可以不要，这是我自己的东西

});

//这里隐藏遮罩

$(".okbtn").click(function(e){

$(".shade,.tanceng").css("display","none");

$(".shade").height(0);

})

6.html5如何实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框

通过jquery的show（)和hide（)函数联合使用，实现弹出窗口。

一、show（)和hide（)函数解析：

1、show（) 方法显示隐藏的被选元素。

注意：show（) 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

2、hide（) 方法隐藏被选元素。

这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。

二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：

三、设计遮罩层的样式，如下：

四、弹出窗口的css样式，代码如下：

五、初始页面如下：

六、点击按钮，查看弹出窗口结果：

七、关闭弹出窗后，打开开发者中心，如下：

转载请注明出处育才学习网 » html遮罩层怎么写

知识

紫红色的英语怎么写

2020-11-07阅读(193)

本文主要为您介绍紫红色的英语怎么写，内容包括紫红色用英语怎么说，紫色的英语单词怎么写，紫色英文怎么说。purple读音：英 [ˈpɜ：pl] 美 [ˈpɜ：rpl] adj紫色的；帝王的；词藻华美的n.紫色；紫（红）衣，紫袍；帝位，皇权；

知识

景观的英语怎么写

2020-11-07阅读(182)

本文主要为您介绍景观的英语怎么写，内容包括景观英语怎么说，“风景”的英文翻译，描写美丽景观的英语作文。scenery、landscape、view、sights、paysage。scenery 英[ˈsi:nəri] 美[ˈsinəri]

知识

激萌韩语怎么写

2020-11-07阅读(240)

本文主要为您介绍激萌韩语怎么写，内容包括贾硕的韩语怎么写，韩语怎么写，文曦用韩语怎么写。中文：黄嘉敏韩文：황가민读音：huang ga min1. 韩语（朝鲜语）的系属一直都是学术界争论的焦点，基本上可以有三类的观点：2.

知识

糖果的复数英语怎么写

2020-11-07阅读(264)

本文主要为您介绍糖果的复数英语怎么写，内容包括用英语说糖果的复数怎么读，糖果的复数形式，糖果的英语怎么写。糖果的英文有candy;sweet，这两个英语单词既可以做可数名词，也可以做不可数名词。candycandy本身可以做可数名词，也可以作

知识

房屋证明居委会怎么写

2020-11-07阅读(200)

本文主要为您介绍房屋证明居委会怎么写，内容包括房屋证明村委会怎么写，村委会房产证明怎么写，农村房屋无房产证,如果要居委会写证明,请问怎样写。居委会写证明该这样写：特此证明，XXX村民在XXX村x年X日X日X日的X日当天从XXX村民处获得分配的土

知识

义气的义的笔顺怎么写

2020-11-07阅读(274)

本文主要为您介绍义气的义的笔顺怎么写，内容包括正义的义的笔顺怎么写，义气义字笔顺，“义”的笔顺怎么写。

知识

四块黑板板书怎么写

2020-11-07阅读(219)

本文主要为您介绍四块黑板板书怎么写，内容包括如果黑板被分成了四块,中间是电子白板的那种,说课时板书应该写哪，小学语文黑板板书怎么写，黑板的板书怎样设计最好。1. 字体必须足够大在黑板上写的字必须能让一般学生都能看得清。有的时候只

知识

捕捉幸福作文怎么写

2020-11-07阅读(204)

本文主要为您介绍捕捉幸福作文怎么写，内容包括作文《捕捉幸福》怎么写，《捕捉幸福》的作文怎么写，题目：捕捉幸福,600字作文,初中作文,谁会写。范文：我有一个幸福的家 我有一个幸福的家，家里有爸爸、妈妈和我，爸爸妈妈都很关心我。 我爸爸上班比

知识

在期间英语单词怎么写

2020-11-07阅读(212)

本文主要为您介绍在期间英语单词怎么写，内容包括在期间.英语单词怎么写，在期间用英语怎么写，在期间.单词怎么写啊。在……期间的英语：during，读音：[ˈdjʊərɪŋ]。during英 [ˈdjʊərɪŋ] 美 [ˈdʊrɪŋ] prep.在…的

知识

盲字笔画顺序怎么写

2020-11-07阅读(181)

本文主要为您介绍盲字笔画顺序怎么写，内容包括赘字的笔画顺序怎么写，汗的笔画顺序怎么写，宾的笔画顺序怎么写。溉的笔画顺序如下图：

知识

英语的个人总结怎么写

2020-11-07阅读(176)

本文主要为您介绍英语的个人总结怎么写，内容包括英语考试总结500字左右，英语小结怎么写，学生如何总结英语。英语考试总结英语一向是我的弱项，这次也一样，成绩甚至更糟，着实令我大吃一惊。看了一下试卷，又是听力的地方扣了不少分，的确，这个地方的

知识

借据应该怎么写

2020-11-07阅读(211)

本文主要为您介绍借据应该怎么写，内容包括正确的借条格式该怎么写，借条要怎么写啊,格式是怎样的，标准借条格式怎么写。借条的正确格式bai可以参考以下格式写：借款人__________（身份证du号____________________________

知识

小燕用英语怎么写

2020-11-07阅读(213)

本文主要为您介绍小燕用英语怎么写，内容包括我爱小燕用英文怎么写，我一直深爱着小燕英文怎么写，小燕英文名怎么写。有满多译的..你自己看着办吧.1.I always crazy about Xiaoyan.2.I adores Xiaoyan all

知识

英语作业反思怎么写

2020-11-07阅读(200)

本文主要为您介绍英语作业反思怎么写，内容包括英语反思怎么写，英语考试反思怎么写400字，英语反思怎么写。什么内容？期中考考后反思 时间如流水般淌过，转眼间中段考也已结束，成绩也已经公布了。望着试卷上的分数，我惊讶了。因为这并不是我真正想

知识

字体居中html代码怎么写

2020-11-05阅读(208)

本文主要为您介绍字体居中html代码怎么写，内容包括HTML文字居中怎么写，用代码写html语言怎么让字体居中，html居中代码怎么写。如果这排文字放在table里，这样写：<table><td align=＂center＂> &lt；！--让td中的内容居中--><a

知识

html圆形怎么写

2020-11-05阅读(202)

本文主要为您介绍html圆形怎么写，内容包括html圆圈内容怎么写如图在线等急，html中圆形图片怎么插入的，html5如何最圆形布局。<div style=＂width:100px;height:100px;border:1px solid red;border-rad

知识

html中的绝对路径怎么写

2020-11-03阅读(258)

本文主要为您介绍html中的绝对路径怎么写，内容包括HTML中的相对路径和绝对路径是什么意思啊，html5绝对路径怎么写＂写，HTML绝对路径怎么写。你这里说的绝对路径是指绝对网站吧。不管是HTML5还是HTML4，绝对路径和相对路径概念都是一样的。绝对

知识

html文本框怎么写

2020-11-03阅读(276)

本文主要为您介绍html文本框怎么写，内容包括html文本框代码怎么写，css要怎么写文本框，如何用html做文本框。1.单行文本框：<input type=＂text＂ style=＂height:20px;width:100px;＂ />2.多行文本

知识

html中怎么写css

2020-10-26阅读(211)

本文主要为您介绍html中怎么写css，内容包括html中怎么编写css,格式是什么样的，html中标签该如何写CSS，HTML里面.css文件怎么写。样式语法：Selector {property:value}如何将样式表加入您的网页：你可以用以下三种方式将样式表加入您的网页。而

知识

html按钮怎么写代码

2020-10-26阅读(212)

本文主要为您介绍html按钮怎么写代码，内容包括html代码中,图片按钮上写js代码，HTML中,怎么表示一个图片按钮，Html图片按钮效果代码。有两个方法可以参考第一个：写在外部既是写在javascript里面 如：<script type=＂text/javascript＂>f

知识

html验证码怎么写

2020-10-26阅读(246)

本文主要为您介绍html验证码怎么写，内容包括验证码的html怎么写，HTML怎么写验证码，html验证码代码怎么写。<!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂http

知识

html响应式布局怎么写

2020-10-26阅读(193)

本文主要为您介绍html响应式布局怎么写，内容包括html5响应式布局怎么写，HTML5中响应式布局怎么弄，html5响应式布局怎么写。步骤1 创建空白的HTML 5模版 首先，我们创建一个空白的模版，代码很简单，如下所示：复制代码步骤2 增加HTML 5新标签 HTML

知识

1970-01-01阅读()

[/e:loop]