弹出层

来源：互联网发布：mac如何关掉dashboard 编辑：程序博客网时间：2024/04/27 16:11

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link href="./resources/css/login.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="./resources/js/jquery.js"></script><script type="text/javascript">    $().ready(function() {        var $login=$("#login");        $login.click(function(){            showMask();            $("#pupPanel").fadeIn("fast");            $("#logonPanel").fadeIn("fast");            verticalCenterWin($("#pupPanel"));        });    })function showMask() {    var $itxOverlay_header = $("#itxOverlay-header");    $itxOverlay_header.fadeIn('slow', function() {        $(this).fadeTo('normal',0.7);    });}/** * 垂直居中窗体 *  * @param winObj *            窗体对象 */function verticalCenterWin(winObj) {    winObj.css({        left : ($(window).width() - winObj.outerWidth()) / 2,        top : ($(window).height() - winObj.outerHeight()) / 2    });}</script></head><body><input id="login" type="button" value="登录" />    <!--  <div><h1>在线笔记本</h1></div><form action="loginServlet" method="post" >    <a>Username</a><input type="text" name="name"/><br>    <a>Password</a><input type="password" name="password"/><br>    <input type="submit" value="登陆"/></form>-->    <!--登录和注册弹出层-->    <div id="pupPanel" class="modal">        <div class="close">            <a href="javascript:;" title="关闭弹出层按钮"></a>        </div>        <div>            <div class="title">                <h2 id="pop-title">弹出框标题</h2>            </div>            <div class="modalInfo">                <!--登录弹出层-->                <div id="logonPanel" class="infoLogin logonPanel" style="zoom: 1; opacity: 1;">                    <form id="userLogonForm" method="post" name="Logon" action="">                    登录表单                    </form>                </div>                <!--注册弹出层-->                <form id="registerForm" method="post">                    <div id="registerUserPanel" class="infoLogin" style="zoom: 1; opacity: 1; display: none;"></div>                </form>            </div>        </div>        </div>        <div id="itxOverlay-header" ></div> </body></html>

body{    background-image:url(../img/dingzhi_bg2.png);}.modal {    position: fixed;    _position: absolute;    padding: 23px 22px;    _width: 1%;    -moz-box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.5);    -webkit-box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.5);    box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.5);    padding: 0;    zoom: 1;     opacity: 1;     top: 15%;     left: 30%;     z-index: 1002;    display:none;    background-color: #fff;}#itxOverlay-header {    width: 100%;    height: 100%;    background-image: url(../img/translucent.gif);    position: fixed;    top: 0;    left: 0;    opacity: .7;    filter: alpha(opacity = 70);    _filter: alpha(opacity = 70);    -ms-filter: "alpha(opacity=70)";    zoom: 1;    display: none;    z-index: 1001;    -moz-opacity: .7}.modalInfo{position:relative}.infoLogin{width:640px}

关闭弹出层：

$modalClose.click(function() {                        $pupPanel.fadeOut('normal');                        hiddenMask();                        $findPasswordPanel.fadeOut('normal');                    });/** * 单击事件，Mask 罩盖层被销毁 */function hiddenMask() {    var $itxOverlay_header = $("#itxOverlay-header");    $itxOverlay_header.fadeTo('slow', 0, function() {        $itxOverlay_header.hide();    });};

0 0