jquery实现的漂亮弹窗(原创)
    Html
    Css
    Js

    
                        
body,div,h2 {
	margin:0;
	padding:0;
}
body {
	background:url(img/bg.jpg);
	font:12px/1.5 \5fae\8f6f\96c5\9ed1;
	color:#333;
}
/* drag */
#drag {
	position:absolute;
	top:100px;
	left:100px;
	width:300px;
	height:160px;
	background:#e9e9e9;
	border:1px solid #444;
	border-radius:5px;
	box-shadow:0 1px 3px 2px #666;
}
#drag .title {
	position:relative;
	height:27px;
	margin:5px;
}
#drag .title h2 {
	font-size:14px;
	height:27px;
	line-height:24px;
	border-bottom:1px solid #A1B4B0;
}
#drag .title div {
	position:absolute;
	height:19px;
	top:2px;
	right:0;
}
#drag .title a,a.open {
	float:left;
	width:21px;
	height:19px;
	display:block;
	margin-left:5px;
	background:url(img/tool.png) no-repeat;
}
a.open {
	position:absolute;
	top:10px;
	left:50%;
	margin-left:-10px;
	background-position:0 0;
}
a.open:hover {
	background-position:0 -29px;
}
#drag .title a.min {
	background-position:-29px 0;
}
#drag .title a.min:hover {
	background-position:-29px -29px;
}
#drag .title a.max {
	background-position:-60px 0;
}
#drag .title a.max:hover {
	background-position:-60px -29px;
}
#drag .title a.revert {
	background-position:-149px 0;
	display:none;
}
#drag .title a.revert:hover {
	background-position:-149px -29px;
}
#drag .title a.close {
	background-position:-89px 0;
}
#drag .title a.close:hover {
	background-position:-89px -29px;
}
#drag .content {
	overflow:auto;
	margin:0 5px;
}
#drag .resizeBR {
	position:absolute;
	width:14px;
	height:14px;
	right:0;
	bottom:0;
	overflow:hidden;
	cursor:nw-resize;
	background:url(img/resize.png) no-repeat;
}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB {
	position:absolute;
	background:#000;
	overflow:hidden;
	opacity:0;
	filter:alpha(opacity=0);
}
#drag .resizeL,#drag .resizeR {
	top:0;
	width:5px;
	height:100%;
	cursor:w-resize;
}
#drag .resizeR {
	right:0;
}
#drag .resizeT,#drag .resizeB {
	width:100%;
	height:5px;
	cursor:n-resize;
}
#drag .resizeT {
	top:0;
}
#drag .resizeB {
	bottom:0;
}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB {
	width:8px;
	height:8px;
	background:#FF0;
}
#drag .resizeLT {
	top:0;
	left:0;
	cursor:nw-resize;
}
#drag .resizeTR {
	top:0;
	right:0;
	cursor:ne-resize;
}
#drag .resizeLB {
	left:0;
	bottom:0;
	cursor:ne-resize;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jquery实现的漂亮弹窗(原创)

说明:效果中最主要部分是CSS部分以及JS部分。其中CSS部分主要是设置窗口DIV样式的可操作性,如拖动、最大化、最小化事件触发时候的样式切换等。

js部分中每个功能对应一个函数。包括拖拽事件、最大化事件、最小化事件等。

1
      brookes0
      2018/4/15 15:52:21