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 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
vue跨域解决方法
Oct 15 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
javascript 函数速查表
2010/02/07 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
美国性感女装网站:bebe
2017/03/04 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
新三好学生主要事迹
2014/01/23 职场文书
自我鉴定书
2014/03/24 职场文书
国庆节演讲稿
2014/05/27 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL