【jQuery】1、弹出层实现

今天在做一个功能，用来实现对table中选中的数据进行修改

在点击修改按钮的时候，弹出一个页面进行修改操作

那么需要用到弹出层的东西

 

重点就是那个CSS

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>弹出窗口</title>
    <script type="text/javascript" src="../lib/jquery-3.1.1.js"></script>
    <style type="text/css">

        .mask{
            width: 100%;
            height: 100%;
            background:#000;
            position: absolute;
            top: 0px;
            left:0px;
            opacity: 0.4;
            z-index: 8000;
            display: none;
            -moz-user-select: none;
            -webkit-user-select: none;
        }

        .dialog{
            width: 380px;
            background:#fff;
            position: absolute;
            z-index: 9000;
            padding-bottom: 10px;
            display: none;
            -moz-user-select: none;
            -webkit-user-select: none;
        }

    </style>
</head>
<body id="body">
    <h1>Cookie的展示</h1>
    <div id="win1">

        <h2>测试层1111</h2>
        <input id="add" value="新增" type="button" />
        <input id="add2" value="新增2" type="button" />
    </div>

    <div id="win2" class="dialog">
        <div id="movePart">
        标题进行拖拽
        <input id="back2" value="返回2" type="button" />
        </div>
        <div id="content">

            <form action="#" method="post">
                <table>
                    <tr>
                        <div class="parent">
                            <td>
                                <label for="name">cookie名称:</label>
                                <input type="text" id="name" class="required"/>
                            </td>
                            <td>
                                <label for="path">cookie路径:</label>
                                <input type="text" id="path"/>
                            </td>
                        </div>
                    </tr>
                    <tr>
                        <div class="parent">
                            <td>
                                <label for="value">cookie值:</label>
                            </td>
                            <td>
                                <input type="text" id="value" />
                            </td>

                        </div>
                    </tr>
                    <tr>
                        <div class="parent">
                            <td>
                                <label for="domain">cookie域名:</label>
                                <input type="text" id="domain"/>
                            </td>
                            <td>
                                <label for="version">cookie版本:</label>
                                <input type="text" id="version"/>
                            </td>
                        </div>
                    </tr>
                    <tr>
                        <div class="parent">
                            <td>
                                <label for="comment">cookiecomment:</label>
                                <input type="text" id="comment"/>
                            </td>

                        </div>
                    </tr>
                </table>
            </form>

        </div>
    </div>

    <div id="mask" class="mask"></div>
</body>

<script type="application/javascript">
/*
    $(function() {
        $("#toggle").click(function() {
            $(this).text($("#content").is(":hidden") ? "收起" : "展开");
            $("#content").slideToggle();
        });
    });
*/
    /**
     * js弹出窗口层 start
     */
    //获取对应标签函数
    function g(id) {
        return document.getElementById(id);
    }

    function autoCenter(el) {
        //获取可见窗口大小
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;
        //获取对话框宽、高
        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (bodyW - elW)/2 + 'px';
        el.style.top = (bodyH - elH)/2 + 'px';
    }

    //点击之后弹出对话框,遮罩设置
    g("add2").onclick = function(){
        g("win2").style.display = 'block';
        g("mask").style.display = 'block';
        autoCenter(g("win2"));
    }

    //关闭弹出框
    g("back2").onclick = function() {
        g("win2").style.display = 'none';
        g("mask").style.display = 'none';
    }

    //窗口大小改变时，对话框始终居中
    window.onresize = function(){
        autoCenter(g('win2'));
    };

    //鼠标坐标
    var mx = 0, my = 0;
    var dx = 0, dy = 0;
    var isDraging = false; //是否可以拖拽
    //鼠标按下
    g('movePart').addEventListener('mousedown', function(e) {
        var e = e || window.event;
        //获取点击的鼠标位置
        mx = e.pageX;
        my = e.pageY;

        dx = g('win2').offsetLeft;
        dy = g('win2').offsetTop;
        isDraging = true;
    });
    //鼠标移动
    document.onmousemove = function(e){
        var e = e || window.event;
        var x = e.pageX;      //移动时鼠标X坐标
        var y = e.pageY;      //移动时鼠标Y坐标
        if(isDraging){        //判断对话框能否拖动
            var moveX = dx + x - mx;      //移动后对话框新的left值
            var moveY = dy + y - my;      //移动后对话框新的top值
            g('win2').style.left = moveX +'px';       //重新设置对话框的left
            g('win2').style.top =  moveY +'px';     //重新设置对话框的top
        };
    };
    //鼠标松开
    g('movePart').addEventListener('mouseup',function(){
        isDraging = false;
    });
    /**
     * js弹出窗口层 end
     */


/*

    $(document).ready(function() {
        $('#add').on('click', function(){

            $("#win2").slideToggle();

             //获取选中数据
             var selectCookieName = $('#cookieTable tr.selected td:eq(0)').text();

             console.log("cookiename=" + selectCookieName);
             //发起请求
             $.ajax({
             type:"POST",
             url:"<%=oper%>",
             dataType:"json",
             data:{"operKey":"add"},
             success:function(msg){
             alert(msg);

             tableTrClick();
             }
             });
        });
    });
*/
</script>

</html>

 

效果：

 

 

posted @ 2018-02-28 16:05  cutter_point  阅读(125)  评论(0)    收藏  举报