Question

求一个ASP.NET点击按钮后 背景变暗弹出层

我是新手 现在想写个按钮功能 点击按钮后 后台返回一个变量 然后弹出一个层背景变暗
层里显示 返回来的变量值， 请问如何操作！

能说的 具体点更好 可以加本人QQ详解76029748

Answer 1

//用户登录层 (调用时须加入css)
function ShowLoginDiv() { //如果传入参数是 "1" 登录成功后刷新当前页面
var isRefresh=arguments[0];
$("#divLogin").remove();
$("#newDiv").remove();
$("body").append("<div id='newDiv'></div>");
var divLogin = "<div id='loginDiv' style='width:260px;height:160px;'>" +
"<div style='width:100%;height:20px;background:#507cd1;text-align:center;font-size:16px;cursor:move;'>用户登录</div>" +
"<div>" +
"<p style='margin-top:10px;'><span style='margin-left:15px;'>用户名：</span><input id='txtUserLogin' type='text' style='height:18px;line-height:20px;' /><p>" +
"<p style='margin-top:10px;'><span style='margin-left:27px;'>密码：</span><input id='txtUserPass' type='text' style='height:18px;line-height:20px;' /><p>" +
"<p style='margin-top:10px;'><span style='margin-left:15px;'>验证码：</span><input id='txtCode' type='text' style='width:40px;height:18px;line-height:20px;' />" +
"<img style='margin-left:10px;' src='../GetCode.aspx?id=" + Math.random() * 1000 + "' id='imgCode' alt='单击刷新' /></p>" +
"<p style='margin-top:10px;'><input style='margin-left:60px;font-size:14px;width:40px' id='btnSubmit' type='button' value='提交' />" +
"<input style='margin-left:20px;font-size:14px;width:40px' id='btnCancal' type='button' value='取消' /><p>" +
"</div>" +
"</div>";
$("body").append(divLogin);
$("#imgCode").click(function() {
$(this).attr("src","../GetCode.aspx?id=" + Math.random() * 1000);
});
$("#btnCancal").click(function() {
$("#divLogin").remove();
$("#newDiv").remove();
$("#loginDiv").remove();
});
$("#loginDiv").find("div").eq(0).mousedown(function() {
DialogMouseDown("loginDiv");
});
$("#loginDiv").find("div").eq(0).get(0).onmouseup = function() {
DialogMouseUp();
};
$("#btnSubmit").click(function() {
var regUser = /^[0-9a-zA-Z._]{5,15}$/;
var regCode = /^[0-9a-zA-Z]{4}$/;
var userLogin = $.trim($("#txtUserLogin").val());
var userPass = $.trim($("#txtUserPass").val());
var code = $.trim($("#txtCode").val());
if (regUser.test(userLogin) == false || regUser.test(userPass) == false) {
alert("账号或者密码错误。。。");
return false;
}
if (regCode.test(code) == false) {
alert("验证码错误。。。");
return false;
}
$.ajax({
type: "post",
url: "../func/CheckUserLogin.ashx",
data: "typeId=2" + "&userId=" + userLogin + "&userPass=" + userPass + "&code=" + code,
cache: false,
success: function(result) {
if (result == "errorCode") {
alert("验证码错误。。。");
return false;
}
if (result == "loginError") {
alert("用户名或者密码错误。。。");
return false;
}
if (isRefresh == "1") {
alert("登录成功。。。");
window.location.href = document.URL;
return;
}
alert("登录成功,点击关闭。。。");
$("#divLogin").remove();
$("#newDiv").remove();
$("#loginDiv").remove();
}
});
});
}
var move_obj=null; //定义移动对象 实现div拖动效果
function DialogMouseDown(objId)
{
move_obj = document.getElementById(objId);
}
document.onmousemove = function(e) {
if (move_obj) {
e = window.event || e;
}
if (move_obj == null) {
return;
}
if (e.clientY >= 0 && e.clientX >= 0) {
move_obj.style.top = e.clientY + move_obj.offsetHeight / 2 - 3 + "px";
move_obj.style.left = e.clientX + "px";
}
}
function DialogMouseUp()
{
move_obj==null;
}

document.onmouseup = function() {
if (move_obj) {
move_obj = null;
}
}
下面代码是添加的背景层和显示登录的div css 可实现滑动时div跟着移动
#loginDiv /*全屏显示遮盖层里面的内容部分*/
{
position:fixed!important;
z-index:100;
position:absolute;
width:400px;
height:250px;
background-color:white;
top:50%;
left:50%;
margin-left:-200px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-130px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +
(document.documentElement.clientHeight-this.offsetHeight)/2 : /*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
}

#newDiv /*全屏显示的遮盖层*/
{
position:fixed!important;
position:absolute;top:0;left:0;
width:100%;height:100%;
background-color:#000;
opacity:0.3;
filter:alpha(opacity=30);
z-index:1;
_top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +
(document.documentElement.clientHeight-this.offsetHeight)/2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
}

这个是配合jquery ajax写的用户登录层

Answer 2

首先收养了我，然后我会给你一个链接

Answer 3

这里有一个弹出框效果
能自定义定位并随屏滚动而不抖动
还可以设置居中和锁屏
里面有教程和源码