jQuery点击遮罩弹出层固定网页中间



126 502 168



特效描述:遮罩弹出层 固定网页中间,jQuery自适应的图片加文字遮罩弹窗代码(适用于手机端的网页遮罩弹出层代码)

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/main.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

3. HTML代码

<div>
	<button type="button" id="ClickMe">点击显示弹窗遮罩</button>
</div>
<div id="goodcover"></div>
<div id="code">
  <div class="close1"><a href="javascript:void(0)" id="closebt"><img src="images/close.gif"></a></div>
  <div class="goodtxt">
    <p>微信扫一扫</p>
    <p>将您的团购分享到朋友圈</p>
    <p>让更多朋友知道哦~</p>
  </div>
  <div class="code-img"> <img id="ewmsrc"  src="images/code.jpg"/></div>
</div>
<script>
$(function() {
    //alert($(window).height());
    $('#ClickMe').click(function() {
        $('#code').center();
        $('#goodcover').show();
        $('#code').fadeIn();
    });
    $('#closebt').click(function() {
        $('#code').hide();
        $('#goodcover').hide();
    });
	$('#goodcover').click(function() {
        $('#code').hide();
        $('#goodcover').hide();
    });
    /*var val=$(window).height();
	var codeheight=$("#code").height();
    var topheight=(val-codeheight)/2;
	$('#code').css('top',topheight);*/
    jQuery.fn.center = function(loaded) {
        var obj = this;
        body_width = parseInt($(window).width());
        body_height = parseInt($(window).height());
        block_width = parseInt(obj.width());
        block_height = parseInt(obj.height());
        left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
        if (body_width < block_width) {
            left_position = 0 + $(window).scrollLeft();
        };
        top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
        if (body_height < block_height) {
            top_position = 0 + $(window).scrollTop();
        };
        if (!loaded) {
            obj.css({
                'position': 'absolute'
            });
            obj.css({
                'top': ($(window).height() - $('#code').height()) * 0.5,
                'left': left_position
            });
            $(window).bind('resize', function() {
                obj.center(!loaded);
            });
            $(window).bind('scroll', function() {
                obj.center(!loaded);
            });
        } else {
            obj.stop();
            obj.css({
                'position': 'absolute'
            });
            obj.animate({
                'top': top_position
            }, 200, 'linear');
        }
    }
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到