当前位置: 编程技术>jquery
jquery遮罩层弹窗广告代码
来源: 互联网 发布时间：2014-10-09
本文导语: 1，html部分 代码示例: 点击这里 效果增强版的 这里是正文内容 2，css部分 代码示例: .bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;} .content{display:none;width:500px;height:300px;position:fix...
1，html部分
代码示例:
点击这里
效果增强版的
这里是正文内容
2，css部分
代码示例:
.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}
3，js弹窗代码
代码示例:
$(function(){
$('.click').click(function(){
$('.bg').css({'display':'block'});
$('.content').css({'display':'block'});
});
$('.bg').click(function(){
//$('.bg').css({'display':'none'});
//$('.content').css({'display':'none'});
});
$('.click1').click(function(){
$('.bg').fadeIn(200);
$('.content').fadeIn(400);
});
$('.bg').click(function(){
$('.bg').fadeOut(200);
$('.content').fadeOut(200);
});
});
$('.click').click(function(){
$('.bg').css({'display':'block'});
$('.content').css({'display':'block'});
});
$('.bg').click(function(){
//$('.bg').css({'display':'none'});
//$('.content').css({'display':'none'});
});
$('.click1').click(function(){
$('.bg').fadeIn(200);
$('.content').fadeIn(400);
});
$('.bg').click(function(){
$('.bg').fadeOut(200);
$('.content').fadeOut(200);
});
});
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。