扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
没有看到你上传的图片,我这里运行你的程序没有出现你说的抖动 ,我使用的是FIREFOX
创新互联公司成都网站建设定制网站,是成都营销推广公司,为混凝土搅拌罐车提供网站建设服务,有成熟的网站定制合作流程,提供网站定制设计服务:原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站制作热线:028-86922220
遮罩层其实很简单,你完全可以自己写个。
div有个属性index
当你不用时你可以让index=-1 或者
将div的width和height调到0
当你需要遮罩时,通过脚本或者css将width和height调到你需要的值或者地方。
用纯css实现
无需js
修改透明度时,修改filter和opacity属性即可(默认是80%)
图片地址换成你自己的
li的排列随你的喜好
唯一需要注意的是div一定要把li填满
如果有一点html基础,代码你一看就懂的
1 背景半透明遮罩层样式
需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式:
2 jQuery实现遮罩
3 提示框
遮罩的目的无非让人无法操作内容,突出提示框,而提示框可参考上面的制作,z-index比遮罩层更高便可。主要问题是,如何控制提示框在浏览器居中。
当触发一个事件,弹出一个iframe,让这个iframe遮住后面的页面,这样后方的页面功能就会全部失效,也就可以达到一个遮罩的效果,再通过一个事件取消ifram,恢复后方页面的功能。
a.html
!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
html
head
titlemask/title
script type="text/javascript"
src=""/script
script
type="text/javascript"
$(document).ready(function
(){
$('#mask').bind({
click:function
(){
var c = "iframe frameborder='0'
class='mask'style='width:"+$(window).width()+";height:"+($(window).height())+"'
src='b.html'allowtransparency='true'/iframe";
$('body').append(c);
}
});
});
/script
style
type="text/css"
.mask{
display:block;
position:absolute;
z-index:100;
top:
0px;
left:0px;
filter:alpha(opacity=50);
}
body{
background-color:yellow;
}
/style
/head
body
center
ssssss
input type="button"
value="mask" id="mask"
/center
/body
/html
b.html
!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN"
html
head
titlemask/title
script type="text/javascript"
src=""/script
script
type="text/javascript"
$(document).ready(function
(){
$('#remove').bind('click',function
(){
$(window.parent.document).find('iframe').remove()
;
});
});
/script
style
type="text/css"
body{
background-color:
#6C7B8B;
}
/style
/head
body
center
brbrbrbrbrbrbrbrbr
input type="button"id="remove"
value="remove"
center
/body
/html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流