应用js或jQuery+div做一个弹出窗口

要做一个弹出窗口锁屏，弹出窗口要有账户名、密码，才能登录，要求不是在静态页面中，例如：在一个jsp页面中在网页中实属于头页面，有锁屏按钮（像163邮箱类是），点击会弹出原先定义的另一个 jsp页面，也就是弹出框.需要源码给出立马结贴发我邮箱也可。。[email protected]急急急！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这个以前做一个系统时候做过这个功能要考虑比较多内容，给你提供点思路
主要就是一个遮罩层，遮罩层上得登陆ajax处理。
我记得当初做的时候在处理锁屏后页面刷新的情况需要结合cookie判断，要不很难做。
你把csdn账号注销掉然后去发回复 csdn的弹出登录就是参考例子
csdn的html js css都放在你眼前了还要什么例子?
哥们因为我以前是jsp写得，动态的很难给你代码哦，一会我找找看贴给你
jsp的页面，很久前写得，我也忘记有么有错误了<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
    <Meta http-equiv="Pragma" Content="No-cach" />
    <script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/js/jquery.cookie.js"></script>
    <script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/js/RcomJs.js"></script>
    <title>尾气查询检索系统</title>
  </head>
<style type="text/css">
    *{margin:0; padding:0;font-size:12px;}
    body{background:url(../images/srch-skin-index-x.jpg) 0 -6px scroll repeat-x #FFFFFF;height:100%;}
    #warp{background:url(../images/srch_skin.jpg) scroll center top no-repeat transparent;height:100%;margin-top:-6px;width:100%}
    #top{height:20px;line-height:20px;padding:6px 5px 4px;}
    #TopBar{line-height:20px;font-size:14px;}
    #TopBar a{text-decoration:none;color:#0000FFF;float:right;margin:0 4px 0 6px;line-height:22px;}
    #TopBar a:hover{color:#CC3300;}
    #TopBar span{line-height:22px;}
    #TopBar span.t1{font-weight:700;margin-left:10px;float:left}
    #TopBar span.s1{color:#98AED3;line-height:20px;float:right}

    #srch_form{margin: 22px auto 0; width: 960px;}
    #srch_form #srch_input{margin: 0 auto;width: 451px}
    #srch_form #srch_input input.srch_key1{font-size: 1.4em;height: 24px;width:320px;padding:3px 2px;padding:6px 2px 0 \9;*padding-top:4px;border:0;}
    #srch_form #srch_input input#srch{height:33px;padding:0 0 3px;_margin-left:-3px;background:url(../images/s.png) -420px -50px;width:80px;font-weight:700;font-size:14px;color:#FFFFFF;border:none;cursor:pointer}

    .f1{color:#999}
    .f2{color:#000}
</style>
<%
    String user ="";
    boolean flag = false;
    if(request.getSession().getAttribute("UserName")!=null)
    {
       user = (String)request.getSession().getAttribute("UserName");
       flag = true;
    }
%>
<script>
if($.cookie('Exhaust_hasLocked')=='true')
      {
          $.cookie('Exhaust_hasLocked',false);
          location.href="../logout.jsp";
      }
</script>
<body style="overflow:hidden">
<div id=warp>
<div id="top">
    <div id="TopBar">
      <%if(flag){%>
      <span class="t1">欢迎您：</span>
      <span style="float:left"><%=user%></span>
      <a id="logout" href="../logout.jsp">退出登录</a>
      <span class="s1">|</span>
      <a href="../go.do?fw=logto">尾气系统</a>
     <span class="s1">|</span>
      <a href="javascript:void(0)" onclick="if(confirm('你确定要锁屏么？\n锁屏后需要输入密码方可再次进入系统！')){$('#lockBox').show();$.cookie('Exhaust_hasLocked',true)};return false;">锁屏</a>
      <%}else{%>
          <a href="../?sid=1">登录</a>
      <%}%>
    </div>
</div>
<form id="srch_form" name="srch_form"  method="get" onsubmit="return r_check();" action="srch.jsp" target="_blank">
     <div>
        <h1 style="height:140px;"></h1>
        <div id="srch_input">
            <div style="padding:5px;">
               <div style="border:1px solid #6A8AAE;margin-bottom:6px;width:324px">
                   <input name="cph" class="srch_key1 f1" title="请输入车牌号" type="text" value="请输入车牌号"/>
               </div>
               <div style="border:1px solid #6A8AAE;border-right:0;float:left">
                   <input name="fdj" class="srch_key1 f1" title="请输入发动机号" type="text" value="请输入发动机号"/>
               </div>
               <input id="srch" type="button" value="搜  索" onclick="r_srch()" />
            </div>
        </div>
    </div>
</form>
</div>
<%if(request.getSession().getAttribute("UserName")!=null){%>
<div id="lockBox" style="display:none;position:absolute;left:0;top:0;color:#000;font-weight:700;font-size:14px;background:url(../images/lock_bg.jpg) 50% 50%;width:100%;height:100%">
    <div style="position:absolute;left:50%;top:50%;width:403px;height:143px;padding:28px;margin:-102px 0 0 -192px;">
       <h2 style="font-size:14px;margin:0 0 15px 0;line-height:32px;background:url(../images/info.png) no-repeat;padding-left:40px">
          您的系统进入锁屏状态，请输入系统密码解锁
       </h2>
       <div style="font-size:14px;font-weight:100">
           <label style="font-size:14px;">请输入密码：</label>
           <input id="lockLoginPsw" title="当前用户:<%=user%>" type="password" style="color:#999;vertical-align:middle;height:24px;width:180px;padding:2px 0 0 0;"/>
           <input onclick="r_login('<%=user%>',this)" type="button" value="确定" style="cursor:pointer;width:40px;height:26px;margin:2px;vertical-align:middle;"/>
           <img src="../images/loading.gif" style="margin:5px;display:none" id="lockLoginImg" />
       </div>
       <div style="font-size:14px;color:red;padding-left:90px;font-weight:100;margin-top:4px;" id="lockLoginInfo"></div>
    </div>
</div>
<%}%>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
     $("form#srch_form input[name=cph],form#srch_form input[name=fdj]").bind("focus",function(){
         if($.trim($(this).val())== $(this).attr("title"))
           {
             $(this).val("");
             $(this).removeClass("f1").addClass("f2");
           }
     })
      $("form#srch_form input[name=cph],form#srch_form input[name=fdj]").bind("blur",function(){
         if($.trim($(this).val()).length==0)
           {
             $(this).val($(this).attr("title"));
             $(this).removeClass("f2").addClass("f1");
           }
     })
    window.onbeforeunload = function (){
        if($.cookie('Exhaust_hasLocked')=='true')
           {
              return "离开页面会，退出系统，你是否要离开？"
           }
    }
  })
  function r_check(cph,_cph,fdj,_fdj)
  {
     if((cph.length==0||cph==_cph)&&(fdj.length==0||fdj==_fdj))
     {
        alert("车牌号或者发动机编号至少需要输入一个！");
        $("form#srch_form input[name=cph]").focus();
        return false;
     }
     return true;
  }
  function r_srch()
  {
     var cph = $.trim($("form#srch_form input[name=cph]").val());
     var _cph = $("form#srch_form input[name=cph]").attr("title");
     var fdj = $.trim($("form#srch_form input[name=fdj]").val());
     var _fdj = $("form#srch_form input[name=fdj]").attr("title");
     if(r_check(cph,_cph,fdj,_fdj))
     {
         var parm = "";
         if(cph!=_cph)
         {
            parm += ("&cph="+encodeURIComponent(encodeURIComponent(cph)));
         }
         if(fdj!=_fdj)
         {
            parm += ("&fdj="+encodeURIComponent(encodeURIComponent(fdj)));
         }
         window.open('srch.jsp?sid='+RComKit.Miscel.getUuid()+parm);
     }
  }
  function r_login(user,e)
  {
     var psw = $("#lockLoginPsw").val();
     if($.trim(psw).length==0)
     {
        $("#lockLoginInfo").html("密码不可为空");
        $("#lockLoginPsw").val("");
        return false;
     }
     $(e).hide();
     $("#lockLoginImg").show();
     RComKit.Ajax.get("../go.do?fw=lockLogin&psw="+psw+"&user="+user,function(back){
        $(e).show();
        $("#lockLoginImg").hide();
        if(back==1)
        {
           $("#lockLoginInfo").html("");
           $("#lockBox").hide();
           $.cookie('Exhaust_hasLocked',false)
        }else{
           $("#lockLoginPsw").val("");
           $("#lockLoginInfo").html(back);
        }
     });
  }
</script>