简单弹窗拖拽

最新推荐文章于 2022-12-05 10:59:00 发布

相太阳

最新推荐文章于 2022-12-05 10:59:00 发布

阅读量95

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/dreamwf/p/5779414.html

版权

<!doctype html>

<html>
   <head>
       
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <script type="text/javascript" src="引入jquery "></script>
       <link rel="stylesheet" href="" />
       
       <title>html模板</title>
       <meta name="Keywords" content="关键词,关键词">
       <meta name="description" content="">

       
       <style type="text/css">
           *{margin:0;padding:0}
           body{font-family:"微软雅黑";}
           /*弹出框*/
           #login {width:600px;height:350px;background:#b30;box-shadow:0 0 10px #000;z-index:10;position:absolute;display:none;}
           #login #title{background:#FF8502;width:100%;height:50px;font-size:18px;line-height:50px;text-align:left;text-indent:2em;cursor:move;}
           #login #title a{text-decoration:none;display:block;float:right;
           margin-right:16px;}
           #login #title a:hover{color:#F08}
           #content{width:305px;height:175px;margin:50px auto;font-size:16px;}
           p{text-indent:0em;}
           #content p input{height:35px;width:260px;margin-left:6px;border-radius:4px;text-indent:0em;}
           #content .con input{width:10px;height:10px;margin-left: 40px;}
           #content .con a{text-decoration:none;display:block;float:right;
           margin-right:16px;color:#fff;}
           #content .wfsubmit input{margin-left:40px;border:1px solid #46A91C ;background:#46A91C;color:#fff;}

           /*遮罩*/
           #bg{background:#444;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0.6;display:none;}
       </style>
   </head>
<body>
<div id="login">
   <div id="title">用户登录 <a href="#" class="tcclose">✘</a></div>
   <form action="" method="post">
   <div id="content">
       <p>账号<input type="text"/></p>
       <br>
       <p>密码<input type="text"/></p>
       <br>
       <p class="con"><input type="checkbox">下次自动登录 <a href="#">忘记密码</a></p>
       <br>
       <p class="wfsubmit"><input type="button" value="立即登录"/></p>
   </div>
</div>
<div id="bg"></div>
<input type="button" οnclick="wf_tcdelog()" value="弹窗"/>
<script type="text/javascript">
function wf_tcdelog(){
       $("#login").show();
       $("#bg").show();
       var _left =($(window).width()-$("#login").width())/2;//获取左边距离
       var _top =($(window).height()-$("#login").height())/2-50;//获取左边距离
       $("#login").css({left:_left,top:_top});
}
//当浏览器进行改变的时候触发的事件
$(window).resize(function(){
       wf_tcdelog();
});

//关闭窗口
$(".tcclose").click(function(){
       $("#login").hide();
       $("#bg").hide();
});

//拖拽方法。
window.οnlοad=function(){
   init(document.getElementById("title"));
}
var l = 0,t=0,x=0,y=0;
var isOver = false;
var zindex = 999;
function init(titleDom){
   //tm_center(divObj);//居中事件
   /*第一种*/
   var thisDom = titleDom;//获取当前title对象
   var parentDom = thisDom.parentNode;//获取当前title对应的div
   titleDom.onmousedown = function(event){//1111开始
       var e = event || window.event;//为了兼容ie和火狐
       x = e.clientX;//鼠标所在的x坐标
       y = e.clientY;//鼠标所在的y坐标
       l = parseInt(parentDom.style.left);//距离浏览器左边的位置left
       t = parseInt(parentDom.style.top);//距离浏览器顶部的位置top
       isOver = true;//定义拖动标识,防止卡顿
       zindex++;
       parentDom.style.zIndex = zindex;
       document.onmousemove = function(event){
           if(isOver){
               var e = event || window.event;//为了兼容ie和火狐
               var newLeft = l + e.clientX - x;//新的左边距
               var newTop = t + e.clientY - y;//新的顶部边距
               parentDom.style.left = newLeft+"px";
               parentDom.style.top = newTop+"px";
           }
       }; //鼠标移动的事件
       document.onmouseup = function(event){
           if(isOver){
               isOver = false;//还原标识
           }
       };//鼠标松开的事件

   };///结束
};
</script>
</body>
</html>

注意：使用的时候导入jquery

转载于:https://www.cnblogs.com/dreamwf/p/5779414.html

相太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单弹窗拖拽

<!doctype html><html> <head> <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，ut...
复制链接

扫一扫