开发者社区> 黄威的世界> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

1,先看下效果:

 

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

 

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

 2,核心代码

边框阴影效果:

 

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

 

 

背景模糊效果:

Css代码  收藏代码
  1. -ms-filter: blur(2px) brightness(90%);  
  2. -webkit-filter: blur(2px) brightness(90%);  
  3. -moz-filter: blur(2px) brightness(90%);  
  4. -o-filter: blur(2px) brightness(90%);  
  5. filter: blur(2px) brightness(90%);  

 

注意:

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

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

Css代码  收藏代码
  1. .subPagePanel a.close:hover {  
  2.             background-position: -278px -196px; /*x, y */;  
  3.         }  

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS实现有点炫的图片展示效果-图片解体和组合
原文:JS实现有点炫的图片展示效果-图片解体和组合   经过4个月的努力学习,迎来了进入市场的最后一个学习项目。自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的。在这里分享一下,希望大家喜欢~!   小的还是先上图~    http://runjs.cn/detail/tl9quyke 这个是效果的demo链接~惭愧,刚开始写博,还不会在这边加demo。
976 0
Photopile JS – 帮助你实现精致的照片堆叠效果
  Photopile JS 是模拟照片散布堆叠在一起的 JavaScript/jQuery 图片库。点击缩略图,照片会弹出放大 ,再次点击照片会返回。缩略图是可拖动的,允许照片深深的堆在一起而不被覆盖,提高好的使用体验。
1126 0
jquery-barcode:js实现的条码打印
这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html 使用示例: 1 doctype html> 2 3 4 jQuery Barcode ...
1185 0
js模仿java的Map集合,实现功能
<p style=""><span style="">java.util 中的集合类包含 Java 中某些最常用的类。最常用的集合类是 List 和 Map。List 的具体实现包括 ArrayList 和 Vector,它们是可变大小的列表,比较适合构建、存储和操作任何类型对象元素列表。List 适用于按数值索引访问元素的情形。</span></p> <p style=""><span
1561 0
100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型,多次想尝试提交个小游戏但总无法写出让自己满意还能控制在这么小的字节范围。
1071 0
js实现按回车自行提交
document.onkeydown = function (e) { var theEvent = window.event || e; var code = theEvent.
533 0
node-webkit无边框窗口用纯JS实现拖动改变大小
                                    $(function () {             var gui = require('nw.
790 0
js实现图片上传预览及进度条
原文js实现图片上传预览及进度条     最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下:      1:去除浏览器默认的样式;      2:图片从本地选择后,立即预览图片;      3:使用上传可以查看上传进度(本...
1450 0
js实现页面跳转的几种方式
第一种:     &lt;script language="javascript" type="text/javascript"&gt;            window.location.href="login.jsp?backurl="+window.location.href;     &lt;/script&gt; 第二种:     &lt;script language="
1258 0
+关注
黄威的世界
我是一个热衷IT技术的人,希望自己不断地设计开发出对别人非常有用的软件。有近7年的java开发经验(包括2年Android开发经验)和一年左右的linux使用经验。擅长Java Web后台开发 ,喜欢研究新的各种实用技术
667
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载