移动端弹框-说明

<#--弹出框 开始-->
<div id="valuecover"></div>
<div id="values">
<div class="close1"><a href="javascript:void(0)" id="closebt"><img src="/images/close.gif"></a></div>
    <div class="valuetxt">
        <h3 style="text-align: center;margin-bottom: 0.2rem;font-size: 0.3rem;color: #029421">资费说明</h3>
        <p>资费说明资费说明资费说明资费说明</p>
    </div>
</div>
<#--弹出框 结束-->

<script>
    $(function() {
        //alert($(window).height());
        $('.checkValue').click(function() {
            $('#values').center();
            $('#valuecover').show();
            $('#values').fadeIn();
            $("body").css("overflow","hidden")
        });

$('#closebt').click(function() {
    $('#values').hide();
    $('#valuecover').hide();
    $("body").css("overflow","auto")
});

        $('#valuecover').click(function() {
            $('#values').hide();
            $('#valuecover').hide();
            $("body").css("overflow","auto")
        });

        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() - $('#values').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>
<style>

.close1 {

1. width: 6rem;
2. height: 0.8rem;
3. background: #ffffff;

}

#closebt {

1. float: right;
2. margin-top: 0.1rem;
3. margin-right: 0.2rem;

}

    #valuecover {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 133%;background-color: #000;z-index: 1001;-moz-opacity: .8;opacity: .5;filter: alpha(opacity=80);}
    #values {width: 6rem;height: 500px;background-color: #fff;margin: 0.2rem;position: absolute;display: none;left: 0 !important;z-index: 1002;overflow-y: scroll;border-radius: 0.1rem;}
    .valuetxt {padding: 0.5rem;font-size: 0.25rem;}
</style>