JQuery弹出框小Demo

编写css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<style type="text/css">
    .gray{
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.3);
        position:absolute;
        top:0px;
        left:0;
        display:none;
        z-index:99;
    }
    .popup{
        width:532px; 
        height:auto;
        background-color:#fff;
        position:absolute;
        z-index:100;
        border:1px solid #ebeaea;
        left:400px;
        top:96px;
        display:none;
    }
    .popup .top_nav{
        width:532px;
        height:46px;
        background-image: url(images/popup_top_bj.jpg);
        border-bottom:1px solid #ebeaea;
        position:relative;
        cursor:move;
    }
    .popup .top_nav i{
        width:35px;
        height:35px;
        background: #ccc;
        position:absolute;
        top:6px;
        left:8px;
        display:block; 
    }			
    .popup .top_nav span{
        font:18px/18px 'microsoft yahei';
        color:#707070;
        display:block;
        position:absolute;
        top:13px;
        left:50px;
    }
    .popup .top_nav a.guanbi { 
        background:url(images/popup_guanbi.png) repeat 0px 0px; 
        width:35px; height: 35px; 
        display: block; 
        position:absolute;
        top:8px;
        right:10px;
        cursor:pointer;
    }
    .popup .top_nav a.guanbi span { display: none;}
    .popup .top_nav a.guanbi:hover{ background: url(images/popup_guanbi.png) repeat 0px -35px; }
    .popup .min{height:auto;padding: 20px;}
    .box_mid{
        width: 100%;
        height: 50px;
        margin-top: 20px;
        border-bottom: 1px solid silver;
    }
    .checkbox {
        position: relative;
        display: inline-block;
    }
    .checkbox input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }
    input[type="checkbox"], input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }
    .checkbox label {
    }
    .checkbox label {
        width: 55px;
        height: 25px;
        background: #ccc;
        position: relative;
        display: inline-block;
        border-radius: 46px;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }
    .checkbox label:after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 100%;
        left: 0;
        top: 0px;
        z-index: 2;
        background: #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }
    .checkbox input:checked + label {
        background: #4BD865;
    }
    .checkbox input:checked + label:after {
        left: 30px;
    }
    .box_mid span{
        position: relative;
        top: -10px;
        color: #888;
        left: 20px;
    }
    .qr_code{
        width: 100%;
        height:200px;
    }
    .qr_code .left_box{
        width: 50%;
        height:100%;
        /*background: blue;*/
        float: left;
    }
    .left_box{
        justify-content: center; /*子元素水平居中*/
        align-items: center; /*子元素垂直居中*/
        display: -webkit-flex;
    }
    .right_box{
        width: 50%;
        height: 100%;
        /*background: red;*/
        float: right;
    }
    .right_box img{
        width: 160px;
        height: 160px;
        margin-top: 30px;
        margin-left: 40px;
    }
    .box_mids{
        margin-top: 0px;
        border:0px;
        height: 100%;
    }
    .foot p{
    }
</style>

编写body

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<body>
	<input type="button" value="点击" onclick="jQuery.tanchuk();" />
	<div id="qrcodeGray" class="gray"></div>
    <div class="popup" id="popup">
        <div class="top_nav" id='top_nav'>
            <div align="center">
                <i></i>
                <span>视点共享</span>
                <a class="guanbi"></a>
            </div>
        </div>  
        <div class="min">
            <div style="width:100%;height:400px;">
            	<!-- 打开共享链接 -->
                <div class="box_mid">
                    <div class="checkbox">
                        <input type="checkbox"/>
                        <label></label>
                    </div>
                    <span>打开共享链接</span>
                </div>
                <!-- 二维码 -->
                <div class="qr_code">
                    <div class="left_box">
                        <div>
                            <p>将此项目用以下链接与他人共享</p>
                            <p>
                                <input type="text" value=""/>
                                <input type="button" value="复制" />
                            </p>
                        </div>
                    </div>
                    <div class="right_box">
                        <img src="jiam.png" alt="">
                    </div>
                </div>
                <div class="foot">
                    <div><p>隐私设置</p></div>
                    <!-- 打开共享链接 -->
                    <div class="box_mid box_mids">
                        <div class="checkbox">
                            <input type="checkbox"/>
                            <label></label>
                        </div>
                        <span>需要密码才能访问此公共链接</span>					
                    </div>
                    <div>
                        <p>
                            <input type="text" value=""/>
                            <input type="button" value="设置密码" />							
                        </p>
                    </div>
                </div>
            </div>
        </div>           
    </div>
</body>

JQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
    //窗口效果
    //点击按钮显示
    jQuery.tanchuk= function(){
        $("#qrcodeGray").show();
        $("#popup").show();//查找ID为popup的DIV show()显示#qrcodeGray
        tc_center();
    };
    //点击关闭按钮
    $("a.guanbi").click(function(){
        $("#qrcodeGray").hide();
        $("#popup").hide();//查找ID为popup的DIV hide()隐藏
    })
    //窗口水平居中
    $(window).resize(function(){
        tc_center();
    });
    function tc_center(){
        var _top=($(window).height()-$(".popup").height())/2;
        var _left=($(window).width()-$(".popup").width())/2;
        $(".popup").css({top:_top,left:_left});
    }	
</script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(".top_nav").mousedown(function(e){ //鼠标按下事件
            $(this).css("cursor","move");//改变鼠标指针的形状 鼠标移动 
            var offset = $(this).offset();//DIV在页面的位置 offset() 方法返回或设置匹配元素相对于文档的偏移（位置）
            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离 pageX() 属性是鼠标指针的位置，相对于文档的左边缘。
            var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离  pageY() 属性是鼠标指针的位置，相对于文档的上边缘。
            $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
            //bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
            $(".popup").stop();//加上这个之后 
            var _x = ev.pageX - x;//获得X轴方向移动的值 
            var _y = ev.pageY - y;//获得Y轴方向移动的值 
            $(".popup").animate({left:_x+"px",top:_y+"px"},10); 
            }); 
        }); 
        $(document).mouseup(function() { //mouseup 鼠标松开时
            $(".popup").css("cursor","default"); // default 默认光标（通常是一个箭头）
            $(this).unbind("mousemove"); // unbind() 方法移除被选元素的事件处理程序。mousemove触发
        });
    });
</script>

最终样式展示

img1

前端
JQuery弹出框小Demo
http://example.com/2017/08/15/2017-8-15-JQuery弹出框/
Author
Hoey
Posted on
August 15, 2017
Licensed under