在线高分求:asp.net(数据库)+jquery实现百度登陆的弹窗效果代码(附图)

既然已经用了jquery，弹出窗口可以使用jqueryui里的dialog，弹出效果比较柔和，还支持拖动和改变大小

<div id="div1" >
    我要显示的区域
   </div>
<script>
var gDivLogDocument = null;
function UnLockDocument()
  {
    if(gDivLogDocument!=null)
    {
        gDivLogDocument.style.display = "none";
        document.body.removeChild(gDivLogDocument);
        gDivLogDocument = null;
        return;
    }
  }

  function LockDocument(color,bNotAlpha)
  {
        if(gDivLogDocument!=null)
        {
            gDivLogDocument.style.display = "";
            return;
        }
        if(bNotAlpha ==null)
        {
            bNotAlpha  = false;
        }
        gDivLogDocument = document.createElement("DIV");
        gDivLogDocument.style.cssText = "position:absolute;zIndex:500;left:0px;top:0px;margin:0 0 0 0 ;background-color:gray;filter:alpha(opacity=60);-moz-opacity:0.6";
        gDivLogDocument.oncontextmenu=function()
      {
        return false;
      }
            if(bNotAlpha)
            {
              gDivLogDocument.style.filter = "";
          }
          if(color !=null)
            {
                gDivLogDocument.style.backgroundColor = color;
            }
        gDivLogDocument.style.width = document.body.clientWidth+"px";

        var height = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

        gDivLogDocument.style.height =height+"px" ;

        document.body.appendChild(gDivLogDocument);
  }
  function OpenDivWindow(title,iWidth,iHeight,htmlElement)
  {
    var innerHTML =
            " <table width='100%' border=\"0\" cellpadding=\"0\" cellspacing=\"0\"> "+
                " <tr> "+
                  " <td style=\"padding-left: 3px; color: white; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#A9D1E0', endColorStr='#225289',gradientType='0')\"> "+
                        title+" </td>"+
                    " <td align='right' style=\"height: 24px; width: 16px' style='color: white; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#A9D1E0', endColorStr='#225289',gradientType='0')\">"+
                        " <img alt='关闭' style='cursor: pointer' onclick='javascript:CloseDivWindowFromImg(this);' src='../images/close.gif'> </td> "+
                " </tr> "+
            " </table> ";
          var div = document.createElement("DIV");
          div.style.cssText="position: absolute; z-index: 502; background-color: White;width="+(iWidth)+"px;height:"+(iHeight+24)+"px;border:solid 1px gray";
          div.innerHTML = innerHTML;

          if(document.forms.length>0)
          {
                document.forms[0].appendChild(div);
          }else
          {
                document.body.appendChild(div);
          }
          div.appendChild(htmlElement);
          htmlElement.style.display = "";
          CenterObject(div);
          return div;

  }
    function CenterObject(obj)
  {
        var l = (document.body.offsetWidth - obj.offsetWidth)/2;

        var t = (document.documentElement.clientHeight-obj.offsetHeight)/2;
        obj.style.left = l+"px";
        obj.style.top = t +"px";
  }

      function CloseDivWindow(div)
  {
        var innerElement = div.childNodes[1];
        if(innerElement)//remove the child element to body
        {
            innerElement.style.display = "none";
            if(document.forms.length>0)
          {
                document.forms[0].appendChild(innerElement);
          }
          else
          {
                document.body.appendChild(innerElement);
          }
        }

            if(document.forms.length>0)
          {
                document.forms[0].removeChild(div);
          }
          else
          {
            document.body.removeChild(div);
          }

        UnLockDocument();
  }

  function CloseDivWindowFromImg(img)
  {
        var div  = img.parentNode.parentNode.parentNode.parentNode.parentNode;
        CloseDivWindow(div);
  }
LockDocument();
OpenDivWindow("标题",400,300,document.getElementById("div1"));
</script>

谢谢楼上的回复和js代码,弹窗效果我实现了,利用thickbox 插件关键是如何和数据库交互数据传递? !

其实百度这个是用 div 里包裹 iframe实现的

不一定非要jQuery吧，试试这个，如果非要用jQuery的话，把里面的代码换换得了
<html>
<head>
<title>提示信息框 </title>
<style type="text/css">
a{
    color:#000;
    font-size:12px;
    text-decoration:none;
}
a:hover{
    color:#900;
    text-decoration:underline;
}   #massage_box{
    position:absolute;
    left:expression((body.clientWidth-350)/2);
    top:expression((body.clientHeight-200)/2);
    width:350px;
    height:200px;
    filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
    z-index:2; visibility:hidden;
}
#mask{
    position:absolute;
    top:0; left:0;
    width:expression(body.scrollWidth);
    height:expression(body.scrollHeight);
    background:#666;
    filter:ALPHA(opacity=60);
    z-index:1;
    visibility:hidden;
}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
</style>

<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove  function MDown(Object){
    Obj=Object.id
    document.all(Obj).setCapture()
    pX=event.x-document.all(Obj).style.pixelLeft;
    pY=event.y-document.all(Obj).style.pixelTop;
}  function MMove(){
    if(Obj!=''){
        document.all(Obj).style.left=event.x-pX;
        document.all(Obj).style.top=event.y-pY;
    }
}  function MUp(){
    if(Obj!=''){
        document.all(Obj).releaseCapture();
        Obj='';
    }
}   function d_x(){
    mask.style.visibility='visible';
    massage_box.style.visibility='visible'
}
function d_y(){
    massage_box.style.visibility='hidden';
    mask.style.visibility='hidden'
}
</script>
</head>   <body>
<div id="massage_box">
    <div class="massage">
        <div class="header" onmousedown=MDown(massage_box)>
            <div style="display:inline; width:150px; position:absolute">本站提示信息 </div>
<span onClick="javascript:d_y();" style="float:right; display:inline; cursor:hand">× </span>
        </div>

<ul style="margin-right:25">
    <li>你的要放的代码 </li>
    <input type="text" /> <br /> <input type="button" value="这是按扭" />

    <li> </li>
    <li> </li>
</ul>       </div>
</div>   <div id="mask" onClick="javascript:d_y();"> </div>   <span onClick="javascript:d_x();" style="cursor:hand"><a href="#">显示提示信息 </a> </span>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
bottom here
</body>
</html>

可以参考下面几个弹出窗口的实现：
http://trentrichardson.com/Impromptu/
http://nadiaspot.com/jquery/confirm
http://dev.iceburg.net/jquery/jqModal/
http://www.ericmmartin.com/projects/simplemodal/弹出窗口中的button加Click事件就是了

这个有点技巧的是弹出登录后产生网站的验证会话机制，比如SESSION，这个需要研究的

codefans 这个网站上有很多弹出层的例子

jquery弹出模式窗口
    <SCRIPT src="../js/jquery-latest.pack.js" type=text/javascript></SCRIPT>
    <SCRIPT src="../js/ui.mouse.js" type=text/javascript></SCRIPT>
    <SCRIPT src="../js/ui.draggable.js" type=text/javascript></SCRIPT>
    <SCRIPT src="../js/jquery.jwindow.js" type=text/javascript></SCRIPT>
<p><asp:ImageButton ID="btn_addperson" runat="server" Text=""
OnClientClick="OpenWindow1('A.aspx?operate=id='+($('#hd_id').val()), 600,520);return false;"/>
</p><DIV class="window" id="openwin" style=" z-index:100;">
<DIV class="title">
<SPAN id=winTitle> </SPAN>
<SPAN class=buttons><SPAN class="close" id="closewin">关闭</SPAN></SPAN> </DIV><IFRAME class="content_frame"
style="TEXT-ALIGN: center" src="" frameBorder=0
scrolling=no></IFRAME></DIV>
function OpenWindow(url,width,height)
{
     SetTitle(url);
    OpenJWindow('#openwin', url, width,height, EditClosed);

}
function SetTitle(url)
{
  var obj = document.getElementById("winTitle");
obj.innerHTML ="";
}function OpenJWindow(windowId, url, width, height, handler)
{
    $(windowId).css({"width":width,"height":height});
    var content_frame = $(windowId + ' .content_frame');
    if(url.length > 0)
    {
        content_frame.attr({src:url});
        content_frame.css({"width":width - 0,"height":height - 25});
        content_frame.hide();

        var dom_content_frame = content_frame[0];
        var onReadyDone = false;

        // tested under ie6
        dom_content_frame.onreadystatechange=function(){
          if(dom_content_frame.readyState   ==   'complete'   )
          {
            onReadyDone = true;
            content_frame.show();
          }
        };

        // tested under ff2
        if(!onReadyDone)
        {
            dom_content_frame.onload = function() {
                onReadyDone = true;
                content_frame.show();
            };
        }
    }
    else
    {
        content_frame.css({"display":"none"});
    }

    $(windowId).jWindowOpen({
    modal:true,
    center:true,
    drag:windowId + " .title",
    close:windowId + " .close",
    closeHoverClass:"hover",
    closed_handler:handler
    });
}

有div做的效果，而且有后台代码。但是不是本人做的，是从csdn上下载的

支持 div ，想做成什么样就什么样，由自己定

简单,也比较基础,方便学习
//这里主要有两个层  登录层：divLogin     遮罩层：doing//javascript控制两层显示与否
<script type="text/javascript" language="javascript">
        function ShowNo()
        {
            document.getElementById("doing").style.display="none";
            document.getElementById("divLogin").style.display="none";
        }
        function $(id)
        {
            return (document.getElementById) ? document.getElementById(id) : document.all[id] ;
        }
        function showFloat()
    {
        var range = getRange();
            $('doing').style.width = range.width + "px";
            $('doing').style.height = range.height + "px";
            $('doing').style.display = "block";
            document.getElementById("divLogin").style.display="";
    }
        function getRange()
        {
              var top     = document.body.scrollTop;
              var left    = document.body.scrollLeft;
              var height  = document.body.clientHeight;
              var width   = document.body.clientWidth;              if (top==0 && left==0 && height==0 && width==0)
              {
                top     = document.documentElement.scrollTop;
                left    = document.documentElement.scrollLeft;
                height  = document.documentElement.clientHeight;
                width   = document.documentElement.clientWidth;
              }
              return  {top:top  ,left:left ,height:height ,width:width } ;
        }
    </script>
//这个css样式也要加上
    <style type="text/css">
        body{margin:0px;}
    </style>
//主要代码部分
<body>
    <form id="form1" runat="server">
    <a href="javascript:void(0)" onclick="showFloat()">登陆</a>
    
    <div id="doing"  style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
    </div>
    
    <div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:780px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;">
            <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
                <div>
                    用户：
                  <asp:TextBox ID="TxtUserName" runat="server" > </asp:TextBox>
                </div>
                <div>
                    密码：
                  <asp:TextBox ID="TxtUserPwd" runat="server" TextMode="Password" > </asp:TextBox>
                </div>
                <br/>
                <div>
                    <asp:Button ID="BttLogin" runat="server" Text=" 登陆 "/>
                    <input id="BttCancel" type="button" value=" 取消 " onclick="ShowNo()" />
                </div>
            </div>
      </div>
    </form>
//br是用来撑打页面的
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

你们用DIV+CSS+javascript怎么都那么好的呢？

下在插件
http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js
下载插件样式
http://jquery.com/demo/thickbox/thickbox-code/thickbox.css下面就是这么简单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ThickBox 3.1</title><style type="text/css" media="all">
@import "css/global.css";
@import "thickbox-code/thickbox.css";
</style>
<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="thickbox-code/thickbox-compressed.js" type="text/javascript"></script></head><body id="pageTop">
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
</body>
</html>

通过AJAX 的原理与数据库交互~

现在的很多网站都说这样的啊，csdn也是啊

15楼的wuyq11(人生如幻)你贴的代码不能用，回答质量敢不敢高点？

43楼的wangjun8868("编程"有钱人了)thickbox是jquery实现弹窗并遮罩的最好实现，但是，如果点击事件在frame中，触发事件后要求对父框架遮罩并弹出窗口请问该如何实现？最好贴出部分代码加以说明

http://blog.csdn.net/durongjian/archive/2009/08/12/4440337.aspx

Good Good Study,Day Day Up..

连带星的也有水回复 csdn快被大水弥漫了

绝对是iframe做的，为dialogue指定NavigationUrl

JQuery 很容易实践,,登陆在用AJax 就可以了

用GreyBox可以满足你的要求,你可能需要修改一下
看这里

既然你会用ajax,那和后台交互又有什么难呢.............我用的是ms的ajax框架也做了个这东西就是拖动效果不好，没有csdn和qq的好，如果想把下拉框挡起来的话要用iframe....上面几个人写的都可以，改改就成你要的效果了...........

试试这个 http://download.csdn.net/source/1514299jquery 仿模态对话框插件演示: http://blue.bokequn.cn/demos/modalbox/demo/demos.html

我前天做了你一模一样功能的组件,原理很简单,你用楼上的代码做成弹出对话框,然后把你登陆控件用javascript appendChild到弹出对话框里,这样做不用用到ajax也能做出这个效果.

同意呀。我们项目里也是的。Iframe好像方便很多吧。

js+css+div实现遮罩层~~~上面的功能还算简单啦~~~就是层的显示隐藏~~~其它的都一样

你jquery的官方网站上看ui这个部分,你就晓得了

这是一个窗体的Js在前台调用这个JS就可以了
function ModeDialog() {
var title = "";
var width = 522;
var height = 134;
var coverWidth = document.body.clientWidth;
var coverHeight = document.body.scrollHeight;
if (coverHeight < document.body.clientHeight) coverHeight = document.body.clientHeight;
var sBG = '\
<div id="dialogBoxBG" style="background-color:#222222;position:absolute;z-index:9;top:0px;left:0px;width:'+coverWidth+';height:' +coverHeight+ ';filter:alpha(opacity=30)"></div>\
';
//<div id="dialogBoxBG" onClick="parent.closeDialog(0)" style="background-color:#222222;position:absolute;top:0px;left:0px;width:'+coverWidth+';height:' +coverHeight+ ';filter:alpha(opacity=30)"></div>\
//';
this.dialogBody = null;

function $(_sId) { return document.getElementById(_sId);}
//显示
this.show = function() {
this.init();
this.middle("dialogBox");
this.shadow();
this.list();
}

this.reset = function() {
$("dialogBox").style.display = "none";
$("dialogBoxBG").style.display = "none";
$("dialogBoxShadow").style.display = "none";
this.list();
}

this.init = function() {
$("dialogCase")? $("dialogCase").parentNode.removeChild($("dialogCase")) : function(){};
var oDiv = document.createElement("span");
oDiv.id = "dialogCase";
oDiv.innerHTML = sBG + this.dialogBody;
document.body.appendChild(oDiv);
$("dialogBoxBG").style.height = document.body.scrollHeight;
}

this.shadow = function () {
var oShadow = $("dialogBoxShadow");
var oDialog = $("dialogBox");
oShadow['style']['position'] = "absolute";
oShadow['style']['background'] = "#000";
oShadow['style']['display'] = "";
oShadow['style']['opacity'] = "0.2";
oShadow['style']['filter'] = "alpha(opacity=20)";
oShadow['style']['top'] = oDialog.offsetTop + 6;
oShadow['style']['left'] = oDialog.offsetLeft + 6;
oShadow['style']['width'] = oDialog.offsetWidth;
oShadow['style']['height'] = oDialog.offsetHeight;
}

this.open = function(){
this.show();
}

this.middle = function(_sId) {
var sClientWidth = parent ? parent.document.body.clientWidth : document.body.clientWidth;
var sClientHeight = parent ? parent.document.body.clientHeight : document.body.clientHeight;
var sScrollTop = parent? parent.document.body.scrollTop : document.body.scrollTop;
$(_sId)['style']['display'] = "";
$(_sId)['style']['position']= "absolute";
$(_sId)['style']['left'] = (document.body.clientWidth / 2) - ($(_sId).offsetWidth /2);
//var sTop = -80 + (sClientHeight / 2 + sScrollTop) - ($(_sId).offsetHeight / 2);
var sTop =  200;
//var sTop =  (window.screen.height) / 2;
$(_sId)['style']['top'] = sTop > 0 ? sTop : (window.screen.height) / 2;
}
//$(_sId)['style']['top'] = sTop > 0 ? sTop : (sClientHeight / 2 + sScrollTop) - ($(_sid).offsetHeight /2);
//}

this.list = function() {
var oLists = document.getElementsByTagName("SELECT");
for (var i=0;i<oLists.length; i++) {
oLists[i]['style']['display'] = (oLists[i]['style']['display'] == "") ? "none" : "";
}
}
}function openDialog(Str,sWidth,sHeight) {
var oModeDialog = new ModeDialog();

oModeDialog.dialogBody ='<table id="dialogBox" width="'+sWidth+'" border="0" align="center" cellpadding="0" cellspacing="0" style="display:none;z-index:10;" bgcolor="#FFFFFF">\
  <tr>\
    <td width="'+sWidth+'" align = "center" valign="middle"><iframe id="bankShow" name="bankShow" frameborder=0 marginheight=0 width='+sWidth+' height='+sHeight+' marginwidth=0 scrolling=no src="'+Str+'"></iframe></td>\
  </tr>\
</table>\
<div id="dialogBoxShadow" style="display:none;z-index:9;"></div>\
';
oModeDialog.open();
return false;
} function closeDialog(){
var oModeDialog = new ModeDialog();
oModeDialog.reset();
}

下载Jquery UI中的插件就可以了！呵呵!

调试易

在线高分求:asp.net(数据库)+jquery实现百度登陆的弹窗效果代码(附图)

解决方案 »