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实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
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
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
解决layer.open后laydate失效的问题
2019/09/06 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python列表(List)知识点总结
2019/02/18 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
请解释在new与override的区别
2012/10/29 面试题
人事助理岗位职责
2013/11/18 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
高中历史教学反思
2014/02/08 职场文书
物业工程部岗位职责
2015/02/11 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python