实用弹出层进行提示
网站开发中常常会用到提示信息,我们首先会想到用 alert(‘提示信息’)进行提示,但是这样往往不是很美观。所以我们用弹出层(div)加一些样式,这样就显得比较美观。
废话少说,代码贴出来吧
//JS
function showDetail(str,url) {
//背景
var bgObj=document.getElementById("bgDiv");
bgObj.style.width = document.body.offsetWidth + "px";
bgObj.style.height = screen.height + "px";
//定义窗口
var msgObj=document.getElementById("msgDiv");
msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
//关闭
document.getElementById("msgClose").onclick = function(){
bgObj.style.display = msgObj.style.display = "none";
window.location.href=url;
}
msgObj.style.display = bgObj.style.display = "block";
switch(getOs())
{
case 1:
document.getElementById("msgDetail").innerHTML=str;
break;
case 2:
document.getElementById("msgDetail").innerHTML=str;
break;
}
}
function getOs() //判断浏览器类别
{
if(navigator.userAgent.indexOf("MSIE")>0)return 1;//IE
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)return 2;//Firefox
if(isSafari=navigator.userAgent.indexOf("Safari")>0)return 3;
if(isCamino=navigator.userAgent.indexOf("Camino")>0)return 4;
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0)return 5;
return 0;
}
//样式
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#msgDiv {
z-index:10001;//关键是这饿元素:比10001小的都在MSGDIV下面
width:400px;
height:250px;
background:white;
border:#336699 1px solid;
position:absolute;
left:50%;
top:50%;
font-size:12px;
margin-left:-225px;
display: none;
}
#bgDiv
{
z-index:10000;
display: none;
position: absolute;
top: 0px;
left: 0px;
right:0px;
background-color: #777;
filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
opacity: 0.6;
}
#msgShut
{
display:block;
height:27px;
background-image:url(images/win_top.png); background-repeat:repeat-x; background-position:left top;
}
后台调用的时候
Page.RegisterStartupScript("", "<script>showDetail('" + outPutStr + "','" + linkUrl + "');</script>");