WEB开发网
开发学院网页设计JavaScript Ajax+jQuery实现LightBox与服务器通信 阅读

Ajax+jQuery实现LightBox与服务器通信

 2010-09-14 13:42:23 来源:WEB开发网   
核心提示:LightBox效果又叫windows关机效果,就是像windows关机时一样,Ajax+jQuery实现LightBox与服务器通信,桌面上的应用失效而只能点击关机等框内的几个按钮,在网页中其实就是利用了两个层,我把代码都写到一个文件里了,css也直接写在行内,其中一个设置成半透明遮住整个屏幕,另一个放在其上面用来显

LightBox效果又叫windows关机效果。就是像windows关机时一样,桌面上的应用失效而只能点击关机等框内的几个按钮。在网页中其实就是利用了两个层。其中一个设置成半透明遮住整个屏幕,另一个放在其上面用来显示内容。

在写之前看过了cloudgamer的效果,自认JavaScript功力远不及他。参考了他的效果之后写了这个简单版并加入了LightBox与服务器的通信。

为了方便演示,我把代码都写到一个文件里了,css也直接写在行内。

首先是覆盖层:

<div id="coverLayer" style=" display:none; background:#000000;  position:absolute; "></div>    

先不让他显示、黑色背景、绝对定位。

然后是LightBox:

1    <div id="lightBox" style=" display:none; width:300px; height:200px;position:absolute;z-index:1001; background:#ffffff; left:50%; top:50%; margin-left:-150px; margin-top:-100px; border:#00FFFF double 4px;">
2        <a id="discover" href="#" onclick="discover();">关闭</a>
3        <form id="formLogin">
4        <p>用户名:<input id="tbUserName" name="tbUserName" type="text" /></p>
5        <p>密码:<input id="tbPassword" name="tbPassword" type="password" /></p>
6        <p><input id="btnLogin" name="" type="button" value="登录" onclick="Login();" /></p>
7        </form>
8    </div>
9

1 2 3 4 5  下一页

Tags:Ajax jQuery 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接