js 实现可以移动位置的弹出框

阅读更多

1,先看下效果:

 

而且对话框是可以拖动的:

 

点击对话框右上角的X 可以关闭对话框:

 2,核心代码

边框阴影效果:

 

 div.shadow {
            -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=143, Color=#EA4748)"; /*IE 8*/
            -moz-box-shadow: 4px 3px 10px #03a9f4; /*FF 3.5+*/
            -webkit-box-shadow: 4px 3px 10px #03a9f4; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
            box-shadow: 4px 3px 10px #03a9f4; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
            filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=135, Color=#03a9f4); /*IE 5.5-7*/
        }

 

 

背景模糊效果:

-ms-filter: blur(2px) brightness(90%);
-webkit-filter: blur(2px) brightness(90%);
-moz-filter: blur(2px) brightness(90%);
-o-filter: blur(2px) brightness(90%);
filter: blur(2px) brightness(90%);

 

注意:

(1)设置.subPagePanel h2的margin-top为0,否则标题栏顶部会有白色空白;

(2)鼠标放在对话框"关闭"按钮上,按钮颜色变成红色,实现代码css:

.subPagePanel a.close:hover {
            background-position: -278px -196px; /*x, y */;
        }

 

源代码见附件

 

 

 

 

• 
• 大小: 67.1 KB

• 
• 大小: 43.1 KB

• 
• 大小: 21.7 KB

• dialog.zip (122.9 KB)
• 下载次数: 88

• 查看图片附件