js原生popup_js popup 弹出层实现方法

本文章是一篇关于如何创建一个弹出层的实例，下面看看实例吧。

html

创建一个div块，我们的弹出窗口的内容。名称为popupcontent和使用这个id来确定弹出层的内容：

this is a popup window!

现在来写一个弹出层css教程样式

popup css

#popupcontent{

position: absolute;

visibility: hidden;

overflow: hidden;

border:1px solid #ccc;

background-color:#f9f9f9;

border:1px solid #333;

padding:5px;

}

js首选择利用getelementbyid function popupcontent并设置相关属性

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 +       "

close window

";

完整的js代码

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 +       "

close window

";

var sbar = document.getelementbyid("statusbar");

sbar.style.margintop = (parseint(h)-40) + "px";

popup.style.visibility = "visible";

}

隐藏函数

function hidepopup(){

var popup = document.getelementbyid("popupcontent");

popup.style.visibility = "hidden";

}

调用弹出层方法

open popup