本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • jQuery点击弹出居中遮罩层代码
    时间:2019-12-30 15:27 来源:开源之家 作者:开源之家测试提供 下载:50 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:44.1 KB
    • 运行环境:HTML
    • 下载次数:50 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    jQuery点击弹出居中遮罩层代码

    特效描述:jQuery 点击弹出 居中遮罩层代码,jQuery点击弹出居中遮罩层代码

    代码结构

    1. 引入CSS

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

    2. 引入JS

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

    3. HTML代码

    <br><br><br><br><br><br><br>
    <center>
    <div>
        <button type="button" id="ClickMe">点击显示弹窗遮罩</button>
    </div>
    </center>
    <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>

    jQuery点击弹出居中遮罩层代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信