html页面中如何简单制作弹出窗口层

原文:html页面中如何简单制作弹出窗口层

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

什么是jQuery?
引用jQuery作者的话说,jQuery是一个快速简洁的用于简化HTML文档的事件处理、动画效果、AJax交互的快速稳定的JavaScript类库。一句话就是,jQuery做好了所有底层的东西,我们只需要短短几行代码,就可以完成原来可能需要几十行JS代码才能完成的功能。
第一步:我们将要做什么?
一图抵千言。让我们看看这个DIV弹出窗口的效果截图:
html页面中弹出窗口层(jQuery)
看到了吗?我们制作了一个非常简单的网页,里面包含一个按钮。点击这个按钮就可以激活这个漂亮的自定义弹出窗口了!抛弃浏览器自带的生硬弹窗效果吧!
第二步:创建一个简单的网页
HTML
这里,我们创建了2个html区块。一个DIV名为popupContact,这里是弹出窗口中所包含的内容,初始状态下它是不可见的(通过CSS实现)。另一个DIV区块:backgroundPopup主要用做陪衬突出我们弹出窗口的效果,它初始状态也是不可见的。所谓红花还须绿叶衬,就是这个道理了。
        <div id="button"><input type="submit" value="点击这里查看效果" /></div>  
        <div id="popupContact">  
        <a id="popupContactClose">[X]</a>  
        <h1>标题</h1>  
         <input id="Text1" type="text" /><br />
         <input id="Text2" type="text" />       
   </div>  
   <div id="backgroundPopup"></div>  

CSS样式
写好了HTML代码,我们需要给这个网页添加一些CSS样式了。其中最重要的是将popupContact 和 backgroundPopup 2个DIV区块隐藏起来。因为我们在打开页面的时候并不希望见到他们,不是么?它们的出现得益于用户主动按下某个按钮或链接,然后通过JavaScript来显示它们。  
     <style type="text/css">
        #backgroundPopup
        {
            display: none;
            position: fixed;
            _position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background: #cccccc;
            border: 1px solid #cecece;
            z-index: 1;
        }
        #popupContact
        {
            display: none;
            position: fixed;
            _position: absolute;
            height: 245px;
            width: 300px;
            background:#223344;
            border: 2px solid #cecece;
            z-index: 2;
            padding: 12px;
            font-size: 13px;
        }   
        #popupContact h1
        {
            text-align: left;
            color: #6FA5FD;
            font-size: 22px;
            font-weight: 700;
            border-bottom: 1px dotted #D3D3D3;
            padding-bottom: 2px;
            margin-bottom: 20px;
        }
        #popupContactClose
        {
            font-size: 14px;
            line-height: 14px;
            right: 6px;
            top: 4px;
            position: absolute;
            color: #6fa5fd;
            font-weight: 700;
            display: block;
        }
    </style>
CSS代码有些长,不过真正需要大家修改的是我上面做过注释的区块。都是一些非常常见的CSS属性定义。如果有不懂的地方,请查找本站对应资源。
第四步:添加JavaScript代码
此步是本教程的核心,也是实现DIV弹出窗口效果的核心步骤。jQuery允许我们仅通过少数几个过程函数实现这个超酷的弹窗效果;所有这些函数都被我单独打包成了一个JS文件――popup.js。
代码流程解释
我们首先需要创建一个名称为popupStatus的变量来控制弹出窗口的显示与否。
//初始化:是否开启DIV弹出窗口功能
//0 表示开启; 1 表示不开启;
var popupStatus = 0;
接下来是我们的主函数――Jquery加载弹窗函数:
//使用Jquery加载弹窗 
function loadPopup(){   
//仅在开启标志popupStatus为0的情况下加载  
if(popupStatus==0){   
$("#backgroundPopup").css({   
"opacity": "0.7"  
});   
$("#backgroundPopup").fadeIn("slow");   
$("#popupContact").fadeIn("slow");   
popupStatus = 1;   
}   
}  
关闭/去除弹出窗口的函数:
//使用Jquery去除弹窗效果 
function disablePopup(){   
//仅在开启标志popupStatus为1的情况下去除
if(popupStatus==1){   
$("#backgroundPopup").fadeOut("slow");   
$("#popupContact").fadeOut("slow");   
popupStatus = 0;   
}   
}  
我们还希望弹窗出现在屏幕的中央位置:
//将弹出窗口定位在屏幕的中央
function centerPopup(){   
//获取系统变量
var windowWidth = document.documentElement.clientWidth;   
var windowHeight = document.documentElement.clientHeight;   
var popupHeight = $("#popupContact").height();   
var popupWidth = $("#popupContact").width();   
//居中设置   
$("#popupContact").css({   
"position": "absolute",   
"top": windowHeight/2-popupHeight/2,   
"left": windowWidth/2-popupWidth/2   
});   
//以下代码仅在IE6下有效  
$("#backgroundPopup").css({   
"height": windowHeight   
});   
}
好了,有了这些基本函数,我们就可以通过jQuery对事件的触发控制来组合这些基本函数以实现弹出DIV效果了。比如,当用户触发点击按钮事件时,我们依次执行居中函数(centerPopup)和窗口加载函数(loadPopup)即可。当用户点击弹出窗口右上方的"X"形关闭按钮时,触发一个事件执行:关闭弹窗函数。
需要注意的是,所有这些事件触发过程都必须包含在以下代码中:
$(document).ready(function(){   
//执行触发事件的代码区域  
});
当按下id为#button的按钮时触发弹出窗口的事件:
//打开弹出窗口   
//按钮点击事件!
$("#button").click(function(){   
//调用函数居中窗口
centerPopup();   
//调用函数加载窗口
loadPopup();   
});
最后一步是关闭事件的触发,这里我们编写了三种不同的方式来触发关闭窗口事件:点击弹窗右上角的"X"、点击窗口周围的背景和按下键盘上的ESC键。所以代码如下:
//关闭弹出窗口   
//点击"X"所触发的事件
$("#popupContactClose").click(function(){   
disablePopup();   
});   
//点击窗口以外背景所触发的关闭窗口事件!
$("#backgroundPopup").click(function(){   
disablePopup();   
});   
//键盘按下ESC时关闭窗口!
$(document).keypress(function(e){   
if(e.keyCode==27 &amp;amp;amp;&amp;amp;amp; popupStatus==1){   
disablePopup();   
}   
});  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值