169it科技资讯


当前位置:  编程技术>jquery

jquery遮罩层弹窗广告代码

    来源: 互联网  发布时间:2014-10-09

1,html部分
 

代码示例:
<div>点击这里</div>
 <div>效果增强版的</div>
 <div></div>
 <div>这里是正文内容</div>

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;}

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);
});
});

    
相关技术文章:
    ▪jQuery右下角弹出广告代码兼容多浏览器

     用jQuery写了个右下角弹出广告,经过测试完美支持各个浏览器。 需要JQ库,可以去jQurey官网去下载,下载后调入js文件,然后加上以下js:   代码示例: <script type="text/javascript" language="javascript"> $(document).ready(function(){ var menutop = $(window).height() - $("#test2").height(); var menuright = $(window).width() - $("#test2").width(); $(window).scroll(function (){ var offsetTop = menutop + $(window).scrollTop(); $("#test2").css("top",offsetTop ); $("#test2").css("left",menuright); }); $("#gbb").click(function(){ $("#test2").hide("fast"); })......


    ▪jquery弹窗提示窗口代码的例子

     jquery制作的弹窗提示窗口插件,包含多种模式,带有回执函数值的功能。 例子,jquery弹窗代码。   代码示例: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!--[if IE 6]> <script type="text/javascript" src="js/iepngfix_tilebg.js"></script> <![endif]--> <script type="text/javascript"> function position(elem,l,t){     var isIE6 = !-[1,] && !window.XMLHttpRequest;     if(isIE6){         var style = elem.style,         dom  = '(document.documentElement)',         left =......


    ▪jquery全选与反选插件怎么写?实例代码

     用jquery实现一个全选与反选的插件,表单列表数据的全选与取消全选功能,内含示例,小巧实用。 自动判断当前选中数量,加上全选。 将它命名为jQuery.fn.check插件。 功能需求: 1、所有复选框的状态都随全选复选框的状态而发生变化; 2、如果所有复选框都被选中时,全选复选框立即处于选中状态; 3、如果当前选中复选框的数量小于复选框的总数时,全选复选框立即处于非选中状态; 所以,在那些处于全选复选框控制之下的复选框全被点击时,就需要时刻判断当前被选中复选框的个数,从而决定全选复选框是否被选中。 ......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号