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

180 阅读 0 评论 119 点赞

我是靠谱客的博主迅速自行车，最近开发中收集的这篇文章主要介绍JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例讲述了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='http://www.uoften.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>