JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例


Posted in Javascript onFebruary 13, 2015

本文实例讲述了JS+CSS实现可拖拽的漂亮圆角特效弹出层的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS+CSS实现的可拖拽的漂亮圆角效果的弹出层</title>

<style>

body{

 margin:0px;

 padding:0px;

 font-size:14px;

}

#t {

 position:absolute;

 float:left;

 left:0px;

 top:0px;

}

#a {

 float:left;

}

.al {

 opacity: 0.80;

 filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);

}

.al2{

 opacity: 0.00;

 filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);

}

U {

 DISPLAY: block;

 OVERFLOW: hidden;

 HEIGHT: 1px

}

U.f1 {

 background-color:#5cc;

 BACKGROUND: #5cc;

 MARGIN: 0px 3px

}

U.f2 {

 background-color:#5cc;

 BORDER-RIGHT: #5cc 2px solid;

 MARGIN: 0px 1px;

 BORDER-LEFT: #5cc 2px solid

}

U.f3 {

 background-color:#5cc;

 BORDER-RIGHT: #5cc 1px solid;

 MARGIN: 0px 1px;

 BORDER-LEFT: #5cc 1px solid

}

.d_top{

 clear:both;

 overflow:hidden;

 background-color:#5cc;

 height:29px;

 vertical-align:bottom;

}

.d_top a{

 float:right;

 margin-top:5px;

 margin-right:13px;

 padding-top:3px;

 width:18px;

 color:red;

 background-color:#789;

 text-decoration:none;

 font-weight:bold;

 text-align:center;

 vertical-align:middle;

}

.d_top span{

 float:left;

 font-size:13px;

 margin-left:15px;

 margin-top:8px;

}

.d_body {

 BORDER-RIGHT: #5cc 3px solid;

 BORDER-LEFT: #5cc 3px solid;

 padding:10px;

 height:200px;

 background-color:#fff;

}

.d_foot{

 clear:both;

 overflow:hidden;

 background-color:#5cc;

 height:2px;

}

</style>

<script type="text/javascript">

 function $(id){return document.getElementById(id);}

 function show(id){

  var t = $(id);

  t.style.width=document.body.clientWidth;

  t.style.height=document.body.clientHeight;

  window.onresize=function(){

   t.style.width=document.body.clientWidth;

   t.style.height=document.body.clientHeight;

  }

  $(id).style.display="";

 }

 function cl(id){

  $(id).style.display="none";

 }

function moveEvent(e,id){

 var isIE = (document.all)?true:false;

 drag = true;

 xx=isIE?event.x:e.pageX;

 yy=isIE?event.y:e.pageY;

 L = document.getElementById(id).offsetLeft;

 T = document.getElementById(id).offsetTop;

 document.onmousemove = function(e) {

  if (drag) {

   x=isIE?event.x:e.pageX;  if(x<0)x=0;

   y=isIE?event.y:e.pageY;  if(y<0)y=0;

   document.getElementById(id).style.left = L-xx+x;

   document.getElementById(id).style.top  = T-yy+y;

  }

 }

 document.onmouseup=function(){

  drag = false;

 }

}

window.onscroll=function(){

 $("back_div").style.width=document.body.scrollWidth;

 $("back_div").style.height=document.body.scrollHeight;

}

</script>

</head>

<body>

 <div id="a" style="position:absolute; left:300px; top:200px;">

  <a href="javascript:" onClick="show('t')">点这里弹出圆角效果的div</a><a href='https://3water.com/' target='_blank'><u>对话框</u></a>! </div>

 

 <div id="t" style="display:none;">

  <div style="width:100%;height:100%; z-index:-1; position:absolute; float:left; background-color:#555;overflow:hidden;" class="al" id="back_div">

  <iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe>

  </div>

  <DIV style="WIDTH: 500px; position:absolute;float:left;top:25%; left:30%; z-index:999; clear:both; overflow:hidden;" id="t_div">

   <iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe>

   <U class="f1"></U><U class="f2"></U><U class="f3"></U>

   <div class="d_top" onMouseDown="moveEvent(event,'t_div')">

    <span>欢迎光临</span>

    <a href="javascript:" onClick="cl('t')">×</a>

   </div>

   <DIV class="d_body" >欢迎光临:三水点靠木

   </DIV>

   <div class="d_foot"></div>

   <U class="f3"></U><U class="f2"></U><U class="f1"></U>

  </DIV>

 </div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
读jQuery之三(构建选择器)
Jun 11 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JavaScript中string对象
Jun 12 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
JavaScript 五大常见函数
Mar 23 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 #Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 #Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 #Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 #Javascript
AngularJS表单编辑提交功能实例
Feb 13 #Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
jQuery动态修改超链接地址的方法
Feb 13 #Javascript
You might like
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
Python内置函数dir详解
2015/04/14 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
canvas像素画板的实现代码
2018/11/21 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
社区党务公开实施方案
2014/03/18 职场文书
企业精神口号
2014/06/11 职场文书
低碳环保演讲稿
2014/08/28 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python