JQ编写的弹出层

Posted 2020-08-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ编写的弹出层相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=‘utf-8‘>
        <title>jquery遮罩层效果</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css">

        <script type="text/javascript" src=‘js/jquery-1.9.1.min.js‘></script>
        <script type="text/javascript" src=‘js/demo.js‘></script>
    </head>
    <body>
        <input id=‘login-btn‘ type=‘button‘ value=‘登录按钮‘ />
        <!--登录窗口:Begin-->
                <div id="divLoginWindow">
                    <table style="width: 100%;" border="0" cellpadding="2" cellspacing="0">
                        <tr style="background-color: #e0f3d9; border-bottom: #bfe5b3 solid 2px">
                            <td style="height: 38px; width: 100px;">
                                &nbsp;用户登录
                            </td>
                            <td>
                                <img src="imgs/close.png" id="closeBtn" align="absmiddle" alt="关闭" title="关闭" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="height: 5px;">
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                &nbsp;用户名：
                            </td>
                            <td>
                                <input type=‘text‘ />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                &nbsp;密&nbsp;&nbsp;&nbsp;码：
                            </td>
                            <td>
                                <input type=‘text‘ />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                &nbsp;验证码：
                            </td>
                            <td>
                                <input type=‘text‘ />
                                <img src="imgs/code.png" id="imgRndCode" style="vertical-align: middle;"
                                    alt="验证码" title="看不清，点击图片更换图片" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <a onclick="CheckLogin()" id="alogin">登&nbsp;录</a>
                                <br />
                                <span id="showMes"></span>
                            </td>
                        </tr>
                    </table>
                </div>
                <!--登录窗口:End-->
    </body>
</html>

View Code

body   
{
    /*background: #b6b7bc;*/
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}
td
{
    height:35px;
}
        /*设置弹出层窗口的大小*/
        #divLoginWindow
        {
            display: none;
            position: absolute;
            width: 400px;
            height: 210px;
            border: #bfe5b3 solid 1px;
            z-index: 200;
            background: #fff;
        }   
        #closeBtn
        {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: hand;
        }
        /***遮罩层****/
        #greybackground
        {
            background: #000;
            display: block;
            z-index: 100;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
 a
 {
     cursor:pointer;
 }

View Code

$(function () {
    var screenwidth, screenheight, mytop, getPosLeft, getPosTop
    screenwidth = $(window).width();
    screenheight = $(window).height();
    //获取滚动条距顶部的偏移
    mytop = $(document).scrollTop();
    //计算弹出层的left
    getPosLeft = screenwidth / 2 - 200;
    //计算弹出层的top
    getPosTop = screenheight / 2 - 150;
    //css定位弹出层
    $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop });
    //当浏览器窗口大小改变时
    $(window).resize(function () {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = screenwidth / 2 - 200;
        getPosTop = screenheight / 2 - 150;
        $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop });
    });
    //当拉动滚动条时，弹出层跟着移动
    $(window).scroll(function () {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = screenwidth / 2 - 200;
        getPosTop = screenheight / 2 - 150;
        $("#divLoginWindow").css({ "left": getPosLeft, "top": getPosTop + mytop });
    });
    //点击链接弹出登录窗口
    $(‘#login-btn‘).click(function () {
        $("#divLoginWindow").fadeIn("slow"); //toggle("slow"); 
        $("#txtUserName").focus();
        //获取页面文档的高度
        var docheight = $(document).height();
        //追加一个层，使背景变灰
        $("body").append("<div id=‘greybackground‘></div>");
        $("#greybackground").css({ "opacity": "0.5", "height": docheight });
        return false;
    });
    //点击关闭按钮
    $("#closeBtn").click(function () {
        $("#divLoginWindow").fadeOut("slow",function(){
            //删除变灰的层
            $("#greybackground").remove();
        }); ////hide();
        return false;
    });
});

View Code

以上是关于JQ编写的弹出层的主要内容，如果未能解决你的问题，请参考以下文章

angularjs怎么编写一个公共的弹出层插件

js漂亮的弹出层

自己封装的弹出层插件

pluginShare依赖JQuery的弹出层封装

layui的弹出层如何自适应屏幕大小？

layui的弹出层效果在导航中的使用