如何创建一个JavaScript弹出DIV窗口层的效果(2)

var baseText = null;

function showPopup(w,h){
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 onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) + "px";
popUp.style.visibility = "visible";
}

隐藏弹出窗口：

隐藏弹出窗口的过程就相当简单了。只需要首先获取弹出窗口那个DIV的DOM对象，然后将其属性设置成“隐藏”即可。

复制代码 代码如下:

function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

拓展HTML代码最终实现弹窗效果：

我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。

比如，需要在鼠标移动到某连接上时弹出窗口：

<a href="#" >Open popup</a>

需要在鼠标点击某个连接时弹出窗口：

<a href="#" >Open popup</a>

您可能感兴趣的文章: