在线等—JS页面弹出登陆窗口背景变暗，弹出页面的那种，要action

消失的尘芥 2011-10-31 10:27:05
aspx页面如果没有登陆就弹出登陆窗口(类似百度登陆的效果)，登陆窗口的数据（用户名，密码）是要通过action发送给另外一个页面处理的。求JS的代码.最好是JS代码，因为网站版本过低，不能用jquery
...全文
464 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
代码小天王 2011-10-31
  • 打赏
  • 举报
 回复
都给你说了。jquery不是在你服务器用的，是客户端浏览器用的，这样说好了吧？
[Quote=引用 9 楼 lifetimeus 的回复:]

呵呵，至于jquery能不能在低版本的.net framework使用，我不是很清楚，但是我的代码里面就不能用jquery不知道什么原因。嘿嘿
[/Quote]
zell419 2011-10-31
  • 打赏
  • 举报
 回复
jquery 跟framework完全就是两码事 。
消失的尘芥 2011-10-31
  • 打赏
  • 举报
 回复
呵呵，至于jquery能不能在低版本的.net framework使用，我不是很清楚，但是我的代码里面就不能用jquery不知道什么原因。嘿嘿
消失的尘芥 2011-10-31
  • 打赏
  • 举报
 回复
自行解决问题，把JS代码改动一下即可。下面附上代码


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <link href="Css/tp3default.css" rel="stylesheet" type="text/css" />

    <link href="Css/tp3top.css" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript">

        function alertWin(title, msg, w, h) {

            var titleheight = "22px"; // 提示窗口标题高度

            var bordercolor = "#666699"; // 提示窗口的边框颜色

            var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色

            var titlebgcolor = "#666699"; // 提示窗口的标题背景色

            var bgcolor = "#FFFFFF"; // 提示内容的背景色



            var iWidth = document.documentElement.clientWidth;

            var iHeight = document.documentElement.clientHeight;

            var bgObj = document.createElement("div");

            bgObj.id = "bgObjId";

            bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:" + iWidth + "px;height:" + Math.max(document.body.clientHeight, iHeight) + "px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";

            document.body.appendChild(bgObj);



            var msgObj = document.createElement("div");

            msgObj.id = "msgObjId";

            msgObj.style.cssText = "position:absolute;font:11px '宋体';top:" + (iHeight - h) / 2 + "px;left:" + (iWidth - w) / 2 + "px;width:" + w + "px;height:" + h + "px;text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:1px;line-height:22px;z-index:102;";

            document.body.appendChild(msgObj);



            var table = document.createElement("table");

            msgObj.appendChild(table);

            table.style.cssText = "margin:0px;border:0px;padding:0px;";

            table.cellSpacing = 0;

            var tr = table.insertRow(-1);

            var titleBar = tr.insertCell(-1);

            titleBar.style.cssText = "width:100%;height:" + titleheight + "px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:" + titlecolor + ";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;

            titleBar.style.paddingLeft = "10px";

            titleBar.innerHTML = title;

            var moveX = 0;

            var moveY = 0;

            var moveTop = 0;

            var moveLeft = 0;

            var moveable = false;

            var docMouseMoveEvent = document.onmousemove;

            var docMouseUpEvent = document.onmouseup;

            titleBar.onmousedown = function () {

                var evt = getEvent();

                moveable = true;

                moveX = evt.clientX;

                moveY = evt.clientY;

                moveTop = parseInt(msgObj.style.top);

                moveLeft = parseInt(msgObj.style.left);

                document.onmousemove = function () {

                    if (moveable) {

                        var evt = getEvent();

                        var x = moveLeft + evt.clientX - moveX;

                        var y = moveTop + evt.clientY - moveY;

                        if (x > 0 && (x + w < iWidth) && y > 0 && (y + h < iHeight)) {

                            msgObj.style.left = x + "px";

                            msgObj.style.top = y + "px";

                        }

                    }

                };

                document.onmouseup = function () {

                    if (moveable) {

                        document.onmousemove = docMouseMoveEvent;

                        document.onmouseup = docMouseUpEvent;

                        moveable = false;

                        moveX = 0;

                        moveY = 0;

                        moveTop = 0;

                        moveLeft = 0;

                    }

                };

            }



            var closeBtn = tr.insertCell(-1);

            closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;

            closeBtn.innerHTML = "<span style='font-size:15pt; color:" + titlecolor + ";'>×</span>";

            closeBtn.onclick = function () {

                document.body.removeChild(bgObj);

                document.body.removeChild(msgObj);

            }

            var msgBox = table.insertRow(-1).insertCell(-1);

            msgBox.style.cssText = "font:10pt '宋体';";

            msgBox.colSpan = 2;



            var msgs = "<form name='form1' method='post' action='/user/login.aspx' id='Form1'><span>账 号：</span><input type='text' name='User_Login' id='txtName' style='width: 120px' /><br />"

                + "<span>密 码：</span><input type='password' name='User_Password' id='txtPwd' style='width: 120px' /><br />"

                + "<input  value='登录' type='submit' name='Submit' /></form>";

            msgBox.innerHTML = msgs;

            // 获得事件Event对象，用于兼容IE和FireFox type='button'

            function getEvent() {

                return window.event || arguments.callee.caller.arguments[0];

            }

        }

        //执行后台 click() onclick='getValue(\"" + bgObj.id + "\",\"" + msgObj.id + "\")'

        function getValue(bgObjId, msgObjId) {

            document.getElementById("txtVal").value = "姓名是：" + document.getElementById("txtName").value + ",   密码是：" + document.getElementById("txtPwd").value;

            var bgObj = document.getElementById(bgObjId);

            var msgObj = document.getElementById(msgObjId);

            document.body.removeChild(bgObj);

            document.body.removeChild(msgObj);

            //执行隐藏服务器按钮后台事件

            // document.getElementById("btnOk").click();

        }

</script>

</head>

<body >

    <form  runat="server" id="Form1">

        <input type="button" value="点这里" onclick="alertWin('标题','这里是内容',300,200);" />

        <input id="txtVal" type="text" value="" style="width: 800px" />

    </form>

   

</body>

</html>
代码小天王 2011-10-31
  • 打赏
  • 举报
 回复
呵呵。。那是你服务器的.net framework的版本，跟你前段的js没有任何关系。如果你说不能用，那是你页面js的问题。
[Quote=引用 6 楼 lifetimeus 的回复:]

引用 4 楼 ycagri 的回复:

网站版本低，不能用jquery

没有听过有这回事


你在asp.net2.0的网站下，你用jquery试试。看看能不能用
[/Quote]
消失的尘芥 2011-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 ycagri 的回复:]

网站版本低，不能用jquery

没有听过有这回事
[/Quote]

你在asp.net2.0的网站下，你用jquery试试。看看能不能用
代码小天王 2011-10-31
  • 打赏
  • 举报
 回复
我正想说
[Quote=引用 4 楼 ycagri 的回复:]

网站版本低，不能用jquery

没有听过有这回事
[/Quote]
ycagri 2011-10-31
  • 打赏
  • 举报
 回复
网站版本低，不能用jquery

没有听过有这回事
chen_ya_ping 2011-10-31
  • 打赏
  • 举报
 回复
jquery的dialog绝对符合你的要求。
消失的尘芥 2011-10-31
  • 打赏
  • 举报
 回复
上面的
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);

这个只是增加一个DIV哦，怎么用post发送action
cf_nxcxy 2011-10-31
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>网页中弹出小窗口,页面背景逐渐变为半透明</title>

<style>

html,body{font-size:12px;margin:0px;height:100%;}

.mesWindow{border:#666 1px solid;background:#fff;}

.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}

.mesWindowContent{margin:4px;font-size:12px;}

.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}

</style>

<script>

var isIe=(document.all)?true:false;

//设置select的可见状态

function setSelectState(state)

{

var objl=document.getElementsByTagName('select');

for(var i=0;i<objl.length;i++)

{

objl[i].style.visibility=state;

}

}

function mousePosition(ev)

{

if(ev.pageX || ev.pageY)

{

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

//弹出方法

function showMessageBox(wTitle,content,pos,wWidth)

{

closeWindow();

var bWidth=parseInt(document.documentElement.scrollWidth);

var bHeight=parseInt(document.documentElement.scrollHeight);

if(isIe){

setSelectState('hidden');}

var back=document.createElement("div");

back.id="back";

var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";

styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";

back.style.cssText=styleStr;

document.body.appendChild(back);

showBackground(back,50);

var mesW=document.createElement("div");

mesW.id="mesWindow";

mesW.className="mesWindow";

mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";

styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";

mesW.style.cssText=styleStr;

document.body.appendChild(mesW);

}

//让背景渐渐变暗

function showBackground(obj,endInt)

{

if(isIe)

{

obj.filters.alpha.opacity+=1;

if(obj.filters.alpha.opacity<endInt)

{

setTimeout(function(){showBackground(obj,endInt)},5);

}

}else{

var al=parseFloat(obj.style.opacity);al+=0.01;

obj.style.opacity=al;

if(al<(endInt/100))

{setTimeout(function(){showBackground(obj,endInt)},5);}

}

}

//关闭窗口

function closeWindow()

{

if(document.getElementById('back')!=null)

{

document.getElementById('back').parentNode.removeChild(document.getElementById('back'));

}

if(document.getElementById('mesWindow')!=null)

{

document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));

}

if(isIe){

setSelectState('');}

}

//测试弹出

function testMessageBox(ev)

{

var objPos = mousePosition(ev);

messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";

showMessageBox('窗口标题',messContent,objPos,350);

}

</script>

</head>

<body>

<div style="padding:20px">

<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>

<div style="text-align:left;padding-left:20px;padding-top:10px";><select ID="Select1" NAME="Select1"><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div>

<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>

<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>

</div>

</body>

</html>
chen_ya_ping 2011-10-31
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 lifetimeus 的回复:]

呵呵，至于jquery能不能在低版本的.net framework使用，我不是很清楚，但是我的代码里面就不能用jquery不知道什么原因。嘿嘿
[/Quote]
不能用，你也不能简单的就归为net framework的错误啊。
简单js实现弹出登陆框div层，背景变暗不可操作
最近做网站是想到一些网站的登录按钮，点击之后背景变暗且其他内容不能操作。然后也按这思路试了下，废话不多说，直接上代码和demo。 demo示例查看 html代码：plus顺带关注下我的小站阿奇arqi前端吧 <...
弹出层背景变暗之极限学习
弹出层变暗哥们研究了半天，也学习了“仿网易弹出窗口背景变暗”，在学习过程中发现了一些问题，最简单的测试方法是让网页成为符合W3C的形式，就很难实现。而且需要把JS代码放在Body中。那么怎样实现比较完善的效果...
layer：好看的弹出窗口
layer是一款web弹层组件，只需在调用时简单地配置相关参数，即可轻松实现丰富与便捷的操作体验。 ... 如果大家懒得去看的话，我...（和一般弹出窗口区别就是背景变暗，窗口小于主窗口，属于一种父子关系，而非平行
弹出不可移动遮罩层
中国站长天空-网页特效-窗口特效-点击弹出对话框且背景变暗的效果 与之间--> <!-- .style1 { font-size: 12px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; } a...
用div层来实现页面半透明遮罩效果
实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的...
.NET社区

62,039

社区成员

669,051

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章