javaScript用DIV模拟创建模态对话框

Myth丶恋晨 2022-05-14 04:59 261阅读 0赞

现在google浏览器不支持非模态对话框了，所以只好用DIV模拟创建一个模态对话框，代码如下：

<!DOCTYPE html>  
<html>

<head>  
<meta charset="utf-8" />  
<title>div做弹窗口的效果</title>  
<script type="text/javascript">  
var baseText = null;

function showPopup(w, h) \{

//窗口弹出时启动定时器让本窗口5秒后自动关闭并清除定时器  
var t1=setTimeout(refreshCount, 1000 \* 5);  
var popUp = document.getElementById("popupcontent");  
popUp.style.top = "200px";  
popUp.style.left = "200px";  
popUp.style.width = w + "px";  
popUp.style.height = h + "px";  
if(baseText == null) baseText = popUp.innerHTML;

//双引号中含单引号或单引号中含双引号，这样就不用在字符串内使用转义字符"\\"了。  
popUp.innerHTML = baseText + '<div id="statusbar"><button οnclick="hidePopup();">Close window</button></div>';  
var sbar = document.getElementById("statusbar");  
sbar.style.marginTop = (parseInt(h) - 40) + "px";  
popUp.style.visibility = "visible";  
popUp.style.visibility = "visible";  
\}

function refreshCount() \{  
//必须先关闭窗口，然后清除定时器！顺序搞反了后，窗口关闭不了。  
hidePopup();  
clearTimeout(t1);  
\}

function hidePopup() \{  
var popUp = document.getElementById("popupcontent");  
popUp.style.visibility = "hidden";  
\}  
  
</script>  
  
<style type="text/css">  
\#popupcontent \{

position: absolute;

visibility: hidden;

overflow: hidden;  
border: 1px solid \#CCC;  
background-color: \#F9F9F9;  
border: 1px solid \#333;  
padding: 5px;  
\}  
</style>  
</head>

<body>  
<a href="\#" οnmοuseοver="showPopup(300,200);" >鼠标移入时</a><br />  
<a href="\#" οnclick="showPopup(300,200);" >鼠标点击时</a><br />  
<div id="popupcontent">这是一个DIV弹窗效果!</div>  
</body>

</html>