在用JQuery做简单弹出层效果时遇到的问题及解决办法_juquery viewer 层级比 layui.open低-CSDN博客

本文链接：https://blog.csdn.net/cz_2012/article/details/8887140

1.如何让网页水平居中显示？

设置body的margin属性为auto，并设置body的宽度:

body{ margin:auto;width:1000px;}

2.如何让两个或多个div并排显示？

设置要并排显示的div的样式的display为inline：

 <div style="float:left;;">左</div>
 <div style="float:left;;">右</div>

3.弹出层之后背景变灰，并且不可操作。

在body下放置一div，作为遮罩层。当弹出层之后，给遮罩层添加样式：

 /*设置遮罩层的样式*/
        .bgGray{ position:absolute; background-color:#fff; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; top:0px;left:0px;width:100%; height:100%;}

4.可拖动弹出层。

定义一个拖动状态_move，默认为false，当mousedown时将该状态设置为true，mouseup时设置为false。使用document的onmousemove方法，当_move为true时，根据鼠标坐标设置弹出层的新坐标。简单实现如下：

	$("#title").mousedown(function (e) {
                _move = true;
                //计算鼠标与弹出层的坐标差值
                _x = e.clientX - $(this).offset().left;
                _y = e.clientY - $(this).offset().top;
            });

            $("#title").mouseup(function (e) {
                _move = false;
            });
            //调用此方法，若_move为true则设置弹出层的位置
            document.onmousemove = function (e) {
                if (_move) {
                    var x = e.clientX - _x;
                    var y = e.clientY - _y;
                    $("#title").css({ "left": x + "px", "top": y + "px" });
                }
            };

<body>
<div id="title" style="width:300px;height:200px:background-color:Grat;"></div>
</body>

5.div中文本不可选中。

设置div的-moz-user-select属性为none：

 <div id="title" style="-moz-user-select: none;"></div>

6.screenX,clientX,pageX的区别

详见： screenX，clientX，pageX的区别

7.offset()与position()的区别

详见： offset()与position()的区别