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 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
js尾调用优化的实现
May 23 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
javascript 动态添加表格行
2006/06/22 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python单链表原理与实现方法详解
2020/02/22 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
高级工程师英文求职信
2014/03/19 职场文书
安全生产标语
2014/06/06 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
党校党性分析材料
2014/12/19 职场文书
中秋节寄语2015
2015/03/24 职场文书
地道战观后感300字
2015/06/04 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
学校团代会开幕词
2016/03/04 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技