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中getJSON的使用方法
Dec 13 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python入门篇之文件
2014/10/20 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Python实现像awk一样分割字符串
2020/09/15 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
六十大寿答谢词
2014/01/12 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
vue的项目如何打包上线
2022/04/13 Vue.js