HTML页面弹出居中可拖拽的自定义窗口层


Posted in Javascript onMay 07, 2014

使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们。这种效果不仅能够充分利用有限的版面空间,而且能够提高用户体验;更重要的是,它并不影响SEO效果(因为它实际存在于页面中,只是初始为不可见状态)

1、在html页面中定义一个div,并在div实现我们需要展示的内容。

<body> 
<div id="login"> 
<h2><img src="images/close.png" alt="" class="close" />网站登录</h2> 
<form id="loginForm" > 
<div class="info"></div> 
<div class="user">帐 号:<input type="text" name="user" class="text" /></div> 
<div class="pass">密 码:<input type="password" name="pass" class="text" /></div> 
<div class="button"><input type="button" name="sub" class="submit" value="" /></div> 
</form> 
<div class="other">注册新用户 | 忘记密码?</div> 
</div> 
</body>

一图抵千言。让我们看看这个DIV弹出窗口的效果截图:
HTML页面弹出居中可拖拽的自定义窗口层 
2、我所用的CSS样式
#login { 
width:350px; 
height:250px; 
border:1px solid #ccc; 
position:absolute; 
display:block; 
z-index:9999; 
background:#fff; 
} 
#login h2 { 
height:40px; 
line-height:40px; 
text-align:center; 
font-size:14px; 
letter-spacing:1px; 
color:#666; 
background:url(images/login_header.png) repeat-x; 
margin:0; 
padding:0; 
border-bottom:1px solid #ccc; 
cursor:move; 
} 
#login h2 img { 
float:right; 
position:relative; 
top:14px; 
right:8px; 
cursor:pointer; 
} 
#login div.info { 
padding:10px 0 5px 0; 
text-align:center; 
color:maroon; 
} 
#login div.user, #login div.pass { 
font-size:14px; 
color:#666; 
padding:5px 0; 
text-align:center; 
} 
#login input.text { 
width:200px; 
height:25px; 
border:1px solid #ccc; 
background:#fff; 
font-size:14px; 
} 
#login .button { 
text-align:center; 
padding:15px 0; 
} 
#login input.submit { 
width:107px; 
height:30px; 
background:url(images/login_button.png) no-repeat; 
border:none; 
cursor:pointer; 
} 
#login .other { 
text-align:right; 
padding:15px 10px; 
color:#666; 
}

这里面主要注意的是关于div样式的定义,因为需要居中展示我们使用绝对定位position:absolute;其次因为是弹出层,div必须在最外围,所以通常把z-index设置的非常大,这里我们设置为z-index:9999;还有一点是关于div本身是隐藏的需要设置为display:none,但这里我们需要直接看效果所以直接让它展现使用display:block;

3、我们需要让它居中展示,那么首先就必须获取浏览器的高度和宽度,如果有滚动条的水平或者竖向偏移,还需要获取那个长度,通过计算获取div应该浏览器的位置。

$(document).ready(function() 
{ 
jQuery.fn.extend({ 
center:function(width,height) 
{ 
return $(this).css("left", ($(window).width()-width)/2+$(window).scrollLeft()). 
css("top", ($(window).height()-height)/2+$(window).scrollTop()). 
css("width",width). 
css("height",height); 
} 
}); 
});

通过点击按钮让它展现
$(".login").click(function () 
{ 
$("#login").show().center(350,250);//展现登陆框 
});

效果图
HTML页面弹出居中可拖拽的自定义窗口层 
4、能对弹出框进行拖拽

代码实现

$(document).ready(function() 
{ 
jQuery.fn.extend({ 
//拖拽功能 
drag:function(){ 
var $tar = $(this); 
return $(this).mousedown(function(e){ 
if(e.target.tagName =="H2"){ 
var diffX = e.clientX - $tar.offset().left; 
var diffY = e.clientY - $tar.offset().top; 
$(document).mousemove(function(e){ 
var left = e.clientX - diffX; 
var top = e.clientY - diffY; 
if (left < 0){ 
left = 0; 
} 
else if (left <= $(window).scrollLeft()){ 
left = $(window).scrollLeft(); 
} 
else if (left > $(window).width() +$(window).scrollLeft() - $tar.width()){ 
left = $(window).width() +$(window).scrollLeft() -$tar.width(); 
} 
if (top < 0){ 
top = 0; 
} 
else if (top <= $(window).scrollTop()){ 
top = $(window).scrollTop(); 
} 
else if (top > $(window).height() +$(window).scrollTop() - $tar.height()){ 
top = $(window).height() +$(window).scrollTop() - $tar.height(); 
} 
$tar.css("left",left + 'px').css("top",top + 'px'); 
}); 
} 
$(document).mouseup(function(){ 
$(this).unbind("mousemove"); 
$(this).unbind("mouseup") 
}); 
}); 
} 
}); });

这里我们只针对div内容中的H2元素可供点击拖拽,如果需要全局div可进行修改,拖拽原理:当鼠标在指定元素上的按下时,获取该鼠标点坐标,通过计算,把图片也移动到相对应的位置,一旦鼠标点击取消,相对应的按下事件也随之取消,页面静止。

调用拖拽方法

$("#login").drag();

现在我们可以点击弹出框的标题栏随意对其在浏览器中拖拽了。
Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
纯js实现倒计时功能
Jan 06 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
js获取select默认选中的Option并不是当前选中值
May 07 #Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 #Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 #Javascript
jquery删除数据记录时的弹出提示效果
May 06 #Javascript
js单词形式的运算符
May 06 #Javascript
js函数调用的方式
May 06 #Javascript
js使用ajax读博客rss示例
May 06 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python opencv实现运动检测
2018/07/10 Python
virtualenv介绍及简明教程
2020/06/23 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
canvas实现贪食蛇的实践
2022/02/15 Javascript
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers