HTML页面居中弹出自定义窗口层(实现可拖拽)

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


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

[html]  view plain copy print ?
  1.  <body>  
  2. <div id="login">  
  3.     <h2><img src="images/close.png" alt="" class="close" />网站登录h2>  
  4.     <form id="loginForm" >  
  5.     <div class="info">div>  
  6.     <div class="user">帐 号:<input type="text" name="user" class="text" />div>  
  7.     <div class="pass">密 码:<input type="password" name="pass" class="text" />div>  
  8.     <div class="button"><input type="button" name="sub" class="submit" value="" />div>  
  9.     form>  
  10.     <div class="other">注册新用户 | 忘记密码?div>  
  11. div>  
  12.  body>  

一图抵千言。让我们看看这个DIV弹出窗口的效果截图:

HTML页面居中弹出自定义窗口层(实现可拖拽)_第1张图片


2、我所用的CSS样式

[css]  view plain copy print ?
  1. #login {  
  2.     width:350px;  
  3.     height:250px;  
  4.     border:1px solid #ccc;  
  5.     position:absolute;  
  6.     display:block;  
  7.     z-index:9999;  
  8.     background:#fff;  
  9. }  
  10. #login h2 {  
  11.     height:40px;  
  12.     line-height:40px;  
  13.     text-align:center;  
  14.     font-size:14px;  
  15.     letter-spacing:1px;  
  16.     color:#666;  
  17.     background:url(images/login_header.png) repeat-x;  
  18.     margin:0;  
  19.     padding:0;  
  20.     border-bottom:1px solid #ccc;  
  21.     cursor:move;  
  22. }  
  23. #login h2 img {  
  24.     float:right;  
  25.     position:relative;  
  26.     top:14px;  
  27.     right:8px;  
  28.     cursor:pointer;  
  29. }  
  30. #login div.info {  
  31.     padding:10px 0 5px 0;  
  32.     text-align:center;  
  33.     color:maroon;  
  34. }  
  35. #login div.user, #login div.pass {  
  36.     font-size:14px;  
  37.     color:#666;  
  38.     padding:5px 0;  
  39.     text-align:center;  
  40. }  
  41. #login input.text {  
  42.     width:200px;  
  43.     height:25px;  
  44.     border:1px solid #ccc;  
  45.     background:#fff;  
  46.     font-size:14px;  
  47. }  
  48. #login .button {  
  49.     text-align:center;  
  50.     padding:15px 0;  
  51. }  
  52. #login input.submit {  
  53.     width:107px;  
  54.     height:30px;  
  55.     background:url(images/login_button.png) no-repeat;  
  56.     border:none;  
  57.     cursor:pointer;  
  58. }  
  59. #login .other {  
  60.     text-align:right;  
  61.     padding:15px 10px;  
  62.     color:#666;  
  63. }  
这里面主要注意的是关于div样式的定义,因为需要居中展示我们使用绝对定位position:absolute;其次因为是弹出层,div必须在最外围,所以通常把z-index设置的非常大,这里我们设置为z-index:9999;还有一点是关于div本身是隐藏的需要设置为display:none,但这里我们需要直接看效果所以直接让它展现使用display:block;


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

[javascript]  view plain copy print ?
  1. $(document).ready(function()  
  2. {  
  3.         jQuery.fn.extend({  
  4.             center:function(width,height)  
  5.             {  
  6.                 return $(this).css("left", ($(window).width()-width)/2+$(window).scrollLeft()).  
  7.                 css("top", ($(window).height()-height)/2+$(window).scrollTop()).  
  8.                 css("width",width).  
  9.                 css("height",height);  
  10.             }  
  11.         });  
  12.   
  13. });  

通过点击按钮让它展现

[javascript]  view plain copy print ?
  1. $(".login").click(function ()   
  2. {  
  3.     $("#login").show().center(350,250);//展现登陆框  
  4. });  

效果图

HTML页面居中弹出自定义窗口层(实现可拖拽)_第2张图片


4、能对弹出框进行拖拽

代码实现

[javascript]  view plain copy print ?
  1. $(document).ready(function()  
  2. {  
  3.         jQuery.fn.extend({  
  4.             //拖拽功能  
  5.             drag:function(){  
  6.                 var $tar = $(this);  
  7.                 return $(this).mousedown(function(e){  
  8.                     if(e.target.tagName =="H2"){  
  9.                         var diffX = e.clientX - $tar.offset().left;  
  10.                         var diffY = e.clientY - $tar.offset().top;  
  11.                         $(document).mousemove(function(e){  
  12.                             var left = e.clientX - diffX;  
  13.                             var top = e.clientY - diffY;  
  14.                             if (left < 0){  
  15.                                 left = 0;  
  16.                             }  
  17.                             else if (left <= $(window).scrollLeft()){  
  18.                                 left = $(window).scrollLeft();  
  19.                             }  
  20.                             else if (left > $(window).width() +$(window).scrollLeft() - $tar.width()){  
  21.                                 left = $(window).width() +$(window).scrollLeft() -$tar.width();  
  22.                             }  
  23.                             if (top < 0){  
  24.                                 top = 0;  
  25.                             }  
  26.                             else if (top <= $(window).scrollTop()){  
  27.                                 top = $(window).scrollTop();  
  28.                             }  
  29.                             else if (top > $(window).height() +$(window).scrollTop() - $tar.height()){  
  30.                                 top = $(window).height() +$(window).scrollTop() - $tar.height();  
  31.                             }  
  32.                             $tar.css("left",left + 'px').css("top",top + 'px');  
  33.                         });  
  34.                     }  
  35.                     $(document).mouseup(function(){  
  36.                         $(this).unbind("mousemove");  
  37.                         $(this).unbind("mouseup")  
  38.                     });  
  39.                 });  
  40.             }  
  41.         });  
  42.           
  43. });  
这里我们只针对div内容中的H2元素可供点击拖拽,如果需要全局div可进行修改,拖拽原理:当鼠标在指定元素上的按下时,获取该鼠标点坐标,通过计算,把图片也移动到相对应的位置,一旦鼠标点击取消,相对应的按下事件也随之取消,页面静止。

调用拖拽方法

[javascript]  view plain copy print ?
  1. $("#login").drag();  

你可能感兴趣的:(javascript杂谈)