当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们。这种效果不仅能够充分利用有限的版面空间,而且能够提高用户体验;更重要的是,它并不...

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

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



网站登录


帐 号:

密 码:



注册新用户 | 忘记密码?




一图抵千言。让我们看看这个DIV弹出窗口的效果截图:
 
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(/blog_article/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(/blog_article/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);//展现登陆框
});

效果图
 
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).width() +$(window).scrollLeft() - $tar.width()){
left = $(window).width() +$(window).scrollLeft() -$tar.width();
}
if (top < 0){
top = 0;
}
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();

现在我们可以点击弹出框的标题栏随意对其在浏览器中拖拽了。

    
 
 

您可能感兴趣的文章:

  • java命名空间javax.swing.text.html类html.tag的类成员方法: html定义及介绍
  • PHP html标签正则替换并可自定义正则规则
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html.tag定义及介绍
  • 提取html中文字 C#自定义函数
  • java命名空间javax.swing.text.html类html.unknowntag的类成员方法: html.unknowntag定义及介绍
  • jQuery中使用data()方法读取HTML5自定义属性data-*实例
  • java命名空间javax.swing.text.html类htmleditorkit.inserthtmltextaction的类成员方法: html定义及介绍
  • 解析在Android中为TextView增加自定义HTML标签的实现方法
  • java命名空间javax.swing.text.html类html的类成员方法: getallattributekeys定义及介绍
  • java命名空间javax.swing.text.html.parser类dtd的类成员方法: html定义及介绍
  • java命名空间javax.swing.text.html类html.tag的类成员方法: comment定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: color定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: vlink定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: rel定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: src定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: codebase定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: archive定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: face定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: noshade定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: enctype定义及介绍
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: halign定义及介绍
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • HTML 5 <base> 标签-规定页面中所有链接的基准 url
  • [求助]如何将用jsp写成的动态页面(*.jsp), 转换成静态页面(*.html)???
  • HTML <!DOCTYPE> 标签用法详解及如何解决<!DOCTYPE html>未声明时导致页面无效的问题
  • 怎么在一个函数中向页面上输出html页面
  • 在aspx页面引用html页的写法
  • 请教!如何用按钮实现jsp或html页面的打印功能?
  • ?? 将jsp生成的页面保存成html ??
  • JavaScript实现页面截图的类库 html2canvas iis7站长之家
  • html页面里中文显示乱码,如何解决?
  • 请教高手--html页面中的表格数据直接存为excel文件格式
  • HTML5移动页面框架 Junior
  • JavaScript实现页面截图的类库 html2canvas
  • applet显示html页面
  • 急:无法访问linux的html页面(用的是Apache)
  • 怎样用程序来刷新html页面?
  • ASP.NET对HTML页面元素进行权限控制(一)
  • 用正则取出html页面中script段落里的内容
  • 急急急,小问题,怎么在html的meta中实现转向功能,把它指引到另一页面上!??
  • 请问用c/c++如何获得html页面中用户提交的数据(如表单,谢谢! (luoluobobo1 )
  • 把html页面转成pdf zhtmltopdf
  • html页面如何指向web-inf/classes下的applet。是否使用codebase之类的说明,该如何书写。
  • java命名空间javax.swing.text.html类html.tag的类成员方法: dt定义及介绍
  • 基于HTML5的幻灯片 html5slides
  • java命名空间javax.swing.text.html类html.tag的类成员方法: font定义及介绍
  • 基于 KBEngine 的 HTML5 插件 kbengine_html5
  • java命名空间javax.swing.text.html类html.tag的类成员方法: input定义及介绍
  • 让 IE 支持 HTML5 html5shim
  • java命名空间javax.swing.text.html类html.tag的类成员方法: menu定义及介绍
  • HTML文档格式化工具 HTML Tidy
  • java命名空间javax.swing.text.html类html.tag的类成员方法: meta定义及介绍
  • HTML5 在线工具 html5demos


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3