关于弹出一个层(c# js)

因为微软的那个弹出窗口好像必须要用Linkbutton来做

我现在是一个文本框Textbox(id="tb1")

我想用onclick实现点击这个文本框就是当前页面弹出一个层div(id="d1")

需要这个层在页面居中

举报该问题

第1个回答 2008-01-29

var newDIV=document.createElement("div");
//设置样式第一种方法
newDIV.style.textAlign="center";
newDIV.style.width=300px;
newDIV.style.height=200px;
newDIV.style.backgroundColor=white;

newDiv.innerHTML="你要输出的信息";
//加载到页面上显示。
document.body.appendChild(newDIV);

补充：
也可以使用css来定义新建DIV的样式
newDIV.className="newDiv";
<style type="text/css">
.newDIV{width:300px;height:200px;background-color:white;}
</style>

再附上一个别人写好的js包，调用函数就可以了。

//等待操作
function WaitingOpe( msg )
{

IEWaitingOpe( msg );

}

//处理失败
function FailDiv( strTitle, strMsg, flag)
{

IEFailDiv( strTitle, strMsg,flag );

}

//成功提示
function SuccessDiv( strTitle, strMsg )
{

IESuccessDiv( strTitle, strMsg );

}

/*************************************************************
IE浏览器下的DIV层
*************************************************************/
//操作成功的提示
function IESuccessDiv(strTitle, strMsg)
{
if(document.getElementById("bgDiv"))
{
document.body.removeChild(document.getElementById("bgDiv"));
document.body.removeChild(document.getElementById("showDiv"));
}

if( document.getElementById("opbgDiv") != null && document.getElementById("opshowDiv") != null )
{
var obj_opbgDiv = document.getElementById("opbgDiv");
var obj_opshowDiv = document.getElementById("opshowDiv");
document.body.removeChild( obj_opbgDiv );
document.body.removeChild( obj_opshowDiv );
}

var msgw,msgh,bordercolor,titlew;
titlew = 31;//title的高度
msgw = 200;//提示窗口的宽度
msgh = 100;//提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#336699";//提示窗口的边框颜色
titlecolor = "#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth = document.body.offsetWidth;
if( document.body.clientHeight >= screen.height )
sHeight = document.body.clientHeight;
else
sHeight = screen.height;
//生成全屏的DIV层
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#fff";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild( bgObj );

//生成SHOWDIV层
var showObj = document.createElement("div");
showObj.setAttribute('id', 'showDiv');
showObj.style.position = "absolute";
showObj.style.border = "2px solid #254067";
showObj.style.fontSize = "14px";
showObj.style.backgroundColor = "#fff";
showObj.style.width = "350px";
showObj.style.height = "180px"
showObj.style.left = "35%";
showObj.style.top = "35%";
showObj.style.zIndex = "10000";
document.body.appendChild( showObj );

//生成title的DIV层
var titleObj = document.createElement("div")
titleObj.setAttribute("id","titleDiv");
titleObj.style.backgroundImage = "url(image//layer-bg-0305.gif)";
titleObj.style.backgroundRepeat = "repeat-x";
titleObj.style.backgroundPosition = "top";
titleObj.style.height = "31px";
titleObj.style.lineHeight ="31px";
titleObj.style.zIndex = "10001";
document.getElementById("showDiv").appendChild( titleObj );

//生成title层里的span
var title_span = document.createElement("span");
title_span.setAttribute("id","titlespan");
title_span.setAttribute("align","left");
title_span.style.styleFloat = "left";
title_span.style.marginLeft = "8px";
title_span.style.fontSize = "14px";
title_span.style.color = "#333";
title_span.innerHTML = strTitle;
document.getElementById("titleDiv").appendChild( title_span );

//生成title层里的链接中的图片
var title_img = document.createElement("img");
title_img.setAttribute("src","image//layer-close-1.gif");
title_img.setAttribute("align","right");
title_img.setAttribute("alt", "闭める");
title_img.setAttribute("border","0");
title_img.style.cursor = "hand";
title_img.style.margin = "5px 8px 0 0";
title_img.onclick = function()
{
document.body.removeChild( bgObj );
document.body.removeChild( showObj );
}
title_img.onmouseover = function()
{
this.src = "image//layer-close-2.gif";
}
title_img.onmouseout = function()
{
this.src = "image//layer-close-1.gif";
}
document.getElementById("titleDiv").appendChild( title_img );

//生成显示层里的图片
var showDiv_img = document.createElement( "img" );
showDiv_img.setAttribute("src", "image//layer-y.gif");
showDiv_img.setAttribute("alt", "完成");
showDiv_img.style.display = "inline";
showDiv_img.style.styleFloat = "left";
showDiv_img.style.marginLeft = "35px";
showDiv_img.style.marginRight = "25px";
showDiv_img.style.marginTop = "30px";
showDiv_img.style.marginBottom = "0";
document.getElementById("showDiv").appendChild( showDiv_img );

//生成消息的DIV层
var msgObj = document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.marginTop = "20px";
msgObj.style.fontSize = "14px";
msgObj.style.styleFloat = "left";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.textAlign = "left";
msgObj.style.lineHeight ="31px";
msgObj.style.zIndex = "10001";
document.getElementById("showDiv").appendChild( msgObj );

//生成消息的<p>
var msgtxt = document.createElement("p");
msgtxt.setAttribute("id","msgTxt");
msgtxt.style.fontSize = "14px";
msgtxt.innerHTML = strMsg;
document.getElementById("msgDiv").appendChild( msgtxt );

//生成消息成里的确定提示按钮
var msgbutton = document.createElement("a");
msgbutton.setAttribute("id", "msgbutton");
msgbutton.style.backgroundImage = "url(image//layer-btn-bg.gif)";
msgbutton.style.backgroundRepeat = "repeat-x";
msgbutton.style.display = "block";
msgbutton.style.height = "18px";
msgbutton.style.lineHeight = "18px";
msgbutton.style.width = "80px";
msgbutton.style.textAlign = "center";
msgbutton.style.border = "1px solid #DCE4ED";
msgbutton.style.textDecoration = "none";
msgbutton.style.color = "#333333";
msgbutton.style.paddingTop = "2px";
msgbutton.style.fongSize = "12px";
msgbutton.style.cursor = "hand";
msgbutton.innerHTML = "确定";
msgbutton.onclick = function()
{
document.body.removeChild( bgObj );
document.body.removeChild( showObj );
}
document.getElementById("msgDiv").onkeydown=function()
{
if(event.keyCode==13){
document.body.removeChild( bgObj );
document.body.removeChild( showObj );
}
}
msgbutton.onmouseover = function()
{
this.style.color = "#f90";
}
msgbutton.onmouseout = function()
{
this.style.color = "#333333";
}
document.getElementById("msgDiv").appendChild( msgbutton );

document.getElementById("msgDiv").focus();

}

//操作失败的提示
function IEFailDiv(strTitle, strMsg,flag)
{
if( document.getElementById("opbgDiv") != null && document.getElementById("opshowDiv") != null )
{
var obj_opbgDiv = document.getElementById("opbgDiv");
var obj_opshowDiv = document.getElementById("opshowDiv");
document.body.removeChild( obj_opbgDiv );
document.body.removeChild( obj_opshowDiv );
}

var msgw,msgh,bordercolor,titlew;
titlew = 31;//title的高度
msgw = 200;//提示窗口的宽度
msgh = 100;//提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#336699";//提示窗口的边框颜色
titlecolor = "#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth = document.body.offsetWidth;
if( document.body.clientHeight >= screen.height )
sHeight = document.body.clientHeight;
else
sHeight = screen.height;

//测试
// alert( document.body.clientTop );
// alert( document.body.offsetWidth );

//生成全屏的DIV层
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#fff";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild( bgObj );

//生成SHOWDIV层
var showObj = document.createElement("div");
showObj.setAttribute('id', 'showDiv');
showObj.style.position = "absolute";
showObj.style.border = "2px solid #254067";
showObj.style.fontSize = "14px";
showObj.style.backgroundColor = "#fff";
showObj.style.width = "350px";
showObj.style.height = "180px"
showObj.style.left = "35%";
showObj.style.top = "35%";
showObj.style.zIndex = "10000";
document.body.appendChild( showObj );

//生成title的DIV层
var titleObj = document.createElement("div")
titleObj.setAttribute("id","titleDiv");
titleObj.style.backgroundImage = "url(images//layer-bg-0305.gif)";
titleObj.style.backgroundRepeat = "repeat-x";
titleObj.style.backgroundPosition = "top";
titleObj.style.height = "31px";
titleObj.style.lineHeight ="31px";
titleObj.style.zIndex = "10001";
document.getElementById("showDiv").appendChild( titleObj );

//生成title层里的span
var title_span = document.createElement("span");
title_span.setAttribute("id","titlespan");
title_span.setAttribute("align","left");
title_span.style.styleFloat = "left";
title_span.style.marginLeft = "8px";
title_span.style.fontSize = "14px";
title_span.style.color = "#333";
title_span.innerHTML = strTitle;
document.getElementById("titleDiv").appendChild( title_span );

//生成title层里的链接中的图片
var title_img = document.createElement("img");
title_img.setAttribute("src","images//layer-close-1.gif");
title_img.setAttribute("align","right");
title_img.setAttribute("alt", "闭める");
title_img.setAttribute("border","0");
title_img.style.cursor = "hand";
title_img.style.margin = "5px 8px 0 0";
title_img.onclick = function()
{
document.body.removeChild( bgObj );
document.body.removeChild( showObj );
}
title_img.onmouseover = function()
{
this.src = "images//layer-close-2.gif";
}
title_img.onmouseout = function()
{
this.src = "images//layer-close-1.gif";
}
document.getElementById("titleDiv").appendChild( title_img );

//生成显示层里的图片
var showDiv_img = document.createElement( "img" );
showDiv_img.setAttribute("src", "images//layer-n.gif");
showDiv_img.setAttribute("alt", "失败");
showDiv_img.style.display = "inline";
showDiv_img.style.styleFloat = "left";
showDiv_img.style.marginLeft = "35px";
showDiv_img.style.marginRight = "25px";
showDiv_img.style.marginTop = "30px";
showDiv_img.style.marginBottom = "0";
document.getElementById("showDiv").appendChild( showDiv_img );

//生成消息的DIV层
var msgObj = document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.marginTop = "20px";
msgObj.style.fontSize = "14px";
msgObj.style.styleFloat = "left";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.textAlign = "left";
msgObj.style.lineHeight ="31px";
msgObj.style.zIndex = "10001";
document.getElementById("showDiv").appendChild( msgObj );

//生成消息的<p>
var msgtxt = document.createElement("p");
msgtxt.setAttribute("id","msgTxt");
msgtxt.style.fontSize = "14px";
msgtxt.innerHTML = strMsg;
document.getElementById("msgDiv").appendChild( msgtxt );
document.getElementById("bgDiv").focus();

if(flag==1)
{
var msgbutton = document.createElement("a");
msgbutton.setAttribute("id", "msgbutton");
msgbutton.style.backgroundImage = "url(images//layer-btn-bg.gif)";
msgbutton.style.backgroundRepeat = "repeat-x";
msgbutton.style.display = "block";
msgbutton.style.height = "18px";
msgbutton.style.lineHeight = "18px";
msgbutton.style.width = "80px";
msgbutton.style.textAlign = "center";
msgbutton.style.border = "1px solid #DCE4ED";
msgbutton.style.textDecoration = "none";
msgbutton.style.color = "#333333";
msgbutton.style.paddingTop = "2px";
msgbutton.style.fongSize = "12px";
msgbutton.style.cursor = "hand";
msgbutton.innerHTML = "确定";
msgbutton.onclick = function()
{
document.body.removeChild( bgObj );
document.body.removeChild( showObj );
}
msgbutton.onmouseover = function()
{
this.style.color = "#f90";
}
msgbutton.onmouseout = function()
{
this.style.color = "#333333";
}
document.getElementById("msgDiv").appendChild( msgbutton );
document.getElementById("opbgDiv").focus();

}

}

//等待IDV
function IEWaitingOpe( message )
{/*
if( document.getElementById("opbgDiv") != null )
{
var opbgObj = document.getElementById("opbgDiv");
var opshowObj = document.getElementById("opshowDiv")
document.body.removeChild( opbgObj );
document.body.removeChild( opshowObj );
}
*/
if( document.getElementById("opshowDiv") != null )
{
document.body.removeChild( $("opshowDiv"));
}
var msgw,msgh,bordercolor,titlew;
titlew = 31;//title的高度
msgw = 200;//提示窗口的宽度
msgh = 100;//提示窗口的高度
titleheight = 25 //提示窗口标题高度
bordercolor = "#336699";//提示窗口的边框颜色
titlecolor = "#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth = document.body.offsetWidth;
//alert(sWidth);
if( document.body.clientHeight >= screen.height )
sHeight = document.body.clientHeight;
else
sHeight = screen.height;
/*
//生成全屏的DIV层
var op_bgObj=document.createElement("div");
op_bgObj.setAttribute('id','opbgDiv');
op_bgObj.style.position = "absolute";
op_bgObj.style.top = "0";
op_bgObj.style.background = "#fff";
op_bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
op_bgObj.style.opacity = "0.6";
op_bgObj.style.left = "0";
op_bgObj.style.width = sWidth + "px";
op_bgObj.style.height = sHeight + "px";
op_bgObj.style.zIndex = "10002";
document.body.appendChild( op_bgObj );
*/
//生成SHOWDIV层
var op_showObj = document.createElement("div");
op_showObj.setAttribute('id', 'opshowDiv');
op_showObj.style.position = "absolute";
op_showObj.style.border = "2px solid #254067";
op_showObj.style.fontSize = "14px";
op_showObj.style.backgroundColor = "#fff";
op_showObj.style.width = "350px";
op_showObj.style.height = "180px"
op_showObj.style.left = "35%";
op_showObj.style.top = "35%";
op_showObj.style.zIndex = "10002";
document.body.appendChild( op_showObj );

//生成title的DIV层
var op_titleObj = document.createElement("div")
op_titleObj.setAttribute("id","optitleDiv");
op_titleObj.style.backgroundImage = "url(image//layer-bg-0305.gif)";
op_titleObj.style.backgroundRepeat = "repeat-x";
op_titleObj.style.backgroundPosition = "top";
op_titleObj.style.height = "31px";
op_titleObj.style.lineHeight ="31px";
op_titleObj.style.zIndex = "10003";
document.getElementById("opshowDiv").appendChild( op_titleObj );

//生成title层里的span
var op_title_span = document.createElement("span");
op_title_span.setAttribute("id","optitlespan");
op_title_span.setAttribute("align","left");
op_title_span.style.styleFloat = "left";
op_title_span.style.marginLeft = "8px";
op_title_span.style.fontSize = "14px";
op_title_span.style.color = "#333";
op_title_span.innerHTML = "処理中";
document.getElementById("optitleDiv").appendChild( op_title_span );

//生成显示层里的图片
var op_showDiv_img = document.createElement( "img" );
op_showDiv_img.setAttribute("src", "image//loader4.gif");
op_showDiv_img.setAttribute("alt", "処理");
op_showDiv_img.style.display = "inline";
op_showDiv_img.style.styleFloat = "left";
op_showDiv_img.style.marginLeft = "35px";
op_showDiv_img.style.marginRight = "25px";
op_showDiv_img.style.marginTop = "30px";
op_showDiv_img.style.marginBottom = "0";
document.getElementById("opshowDiv").appendChild( op_showDiv_img );

//生成消息的DIV层
var op_msgObj = document.createElement("div");
op_msgObj.setAttribute("id","opmsgDiv");
op_msgObj.setAttribute("align","center");
op_msgObj.style.marginTop = "40px";
op_msgObj.style.fontSize = "14px";
op_msgObj.style.styleFloat = "left";
op_msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
op_msgObj.style.width = msgw + "px";
op_msgObj.style.height = msgh + "px";
op_msgObj.style.textAlign = "center";
op_msgObj.style.lineHeight ="31px";
op_msgObj.style.zIndex = "10003";
document.getElementById("opshowDiv").appendChild( op_msgObj );

//生成消息的<p>
var op_msgtxt = document.createElement("p");
op_msgtxt.setAttribute("id","opmsgTxt");
op_msgtxt.style.fontSize = "14px";
op_msgtxt.innerHTML = message;
document.getElementById("opmsgDiv").appendChild( op_msgtxt );
//document.getElementById("opbgDiv").focus();
}本回答被提问者采纳

相似回答

C#弹出输入框答：弹出一个层呗。要不就用JS去添加你需要的控件！

急求:在C# web应用程序页面上如何弹出一个文件保存的对话框呀呀 C#答：回答：thanks 谢谢楼上的各位的大力帮忙。可能我说的不太清楚。是这样的:在web应用程序,我写了一个 "下载 "按钮,当点击该按钮时,要用代码产生一个保存文件的对话框,就像另存一样,在对话框中输入文件名和路径,点击ok就可以了。我需要的就是用户输入的文件名和路径。现在的问题是:怎样用代码生成一...

JS弹出DIV窗口,按ESC取消答：//关闭层代码 close () ; return false; }); html:   内容在网上找一个“jquery.hotkeys.js”的js包,里面都是jquery整理好的热键, 引入jquery包。 $(document).bind('keydown', 'esc',function (evt){ //关闭层代码 return false; });手敲,未测试,应...

(VS2008 、webform 、C# ) 如何弹出【确认、取消】对话框 ?求现成代 ...答：1.思路：新建一透明层覆盖全部页面；然后弹出提示层；2.实现：这依然是js写的 var dvMask=document.createElement('div');dvMask.style.cssText="position:absolute;width:100%;height:100%;filter:alpha(opacity=50);z-index:1000;"var dvMsgBox=document.createElement('div');dvMsgBox.style.css=...

asp.net C#点击button 弹出一个新窗体答：protected void Button1_Click(object sender, EventArgs e) { var script=@" <SCRIPT LANGUAGE='javascript'> window.open('Default.aspx') </SCRIPT> "; ClientScript.RegisterClientScriptBlock(this.GetType(), string.Empty, script); } ...

C# Session失效 弹出JS登录窗体高分答：用一个时间控件，两种方法，1、一直不停判断是否过期，2、从最后一次鼠标或键盘操作开始计时，如果时间>=session超时时间。最后调用你写的JS脚本

大家正在搜

首页弹出一次的弹出层 js弹层关弹层 js弹出层 js实现弹出层 js自定义弹出层 js点击弹出div层 js实现弹出层可以点击按钮 jquery弹出层插件 jquery手机端弹出层插件

ASP.net C# 后台调用JS函数

在C#中js怎样弹出一个新页面啊

c#.net div+css 弹出层问题

JS弹出层覆盖效果是否可以再次弹出覆盖？

在后台c#语句中，如何像前台一样调用alert弹出提示窗口？

C#中用JavaScript弹出窗口的问题

unity3d中C#弹出一个消息。js是print