自定义一个上下左右居中的div窗口
/* 自定义DIV弹窗样式,是窗口居中 */
.winwarin{position:absolute;
top:50%;
left:50%;
width:200px;
height:100px;
margin-top:-50px;
margin-left:-100px;
/* border:1px solid red; */
line-height:30px;
font-size:16px;
text-align:center;
}
<!--javascript部分-->
<script type="text/javascript">
function winwarin(v)
{
message_box.style.visibility='visible';
//创建灰色背景层
procbg = document.createElement("div");
procbg.setAttribute("id","mybg");
procbg.style.margin="0";
procbg.style.overflowX="auto";
procbg.style.background = "#000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "absolute";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.2";
procbg.style.filter = "Alpha(opacity=20)";
//背景层加入页面
document.body.appendChild(procbg);
document.body.style.overflow = "hidden";
document.getElementById("msg").innerText=v;//.innerHTML
}
//关闭功能
function closeProc()
{
message_box.style.visibility='hidden';
procbg.style.visibility = "hidden";
}
</script>
<!--信息提示层-->
<div class="winwarin" id="message_box" style="position:absolute;
/* left:350px;top:160px; */
width:300px;height:150px;
filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
z-index:1000; visibility:hidden">
<div id= "message" style="border:1px #95BDD4 solid;width:95%; height:95%; background:#fff; color:#036; font-size:14px; line-height:150%; border-top-left-radius: 7px;border-top-right-radius: 7px; border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;">
<!-- DIV弹出状态行:标题、关闭按钮 -->
<div style="background:#95BDD4; height:15%;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px; padding:3 5 0 5; color:#03F" >
<span style="display:inline;width:100px; text-align:left;font-size:140%; float:left; font-weight:bold">提示信息</span>
<div style="display:inline; cursor:pointer" οnclick="closeProc()">
<span style="float:right;font-size:140%">×</span></div>
</div>
<div style="text-align:center; padding:40px 0 0 0">
<span id="msg" style="font-size:13px;"></span>
</div>
</div>
</div>
弹出窗口触发器:
<input type="file" class="medium"/> <img src="img/new/warin.png" alt="提醒" width="20" height="20" style="text-align: center;" οnclick="winwarin('上传文件必须为光合有效辐射')"/>