php代码div自动弹出窗口,点击链接弹出div层的实现代码一例

1，js代码部分

复制代码 代码示例:

var popup_target;

var popup_mouseposX;

var popup_mouseposY;

// ----- popup_exit --

function popup_exit(str)

{

if(str == 'init'){

//document.getElementById("tableid").attachEvent("onclick",popup_exit);

document.getElementById("tableid").onclick = popup_exit;

return;

}

var element = document.getElementById('popup3');

element.style.visibility = 'hidden';

element.style.display = 'none';

}

// ----- popup_show --

function popup_show(id)

{

element = document.getElementById('popup'+id);

element.style.position = "absolute";

element.style.visibility = "visible";

element.style.display = "block";

element.style.left = (document.documentElement.scrollLeft+popup_mouseposX+10)+'px';

element.style.top = (document.documentElement.scrollTop +popup_mouseposY+10)+'px';

//document.getElementById("tableid").attachEvent("onclick",function(){popup_exit('init');});

document.getElementById("tableid").onclick = function(){popup_exit('init');}

}

// ----- popup_mousepos ---

function popup_mousepos(e)

{

var ie = navigator.appName == "Microsoft Internet Explorer";

popup_mouseposX = ie ? window.event.clientX : e.clientX;

popup_mouseposY = ie ? window.event.clientY : e.clientY;

}

// ----- Attach Events ----

//www.jquerycn.cn

document.attachEvent('onmousedown', popup_mousepos);

2，css代码部分

复制代码 代码示例:

div.sample_popup

{

z-index: +1;

cursor:default;

border: 1px solid #34A2DC;

width: 194px;

height: 100px;

background:#FFF;

font-size:12px;

}

3，页面内容部分

复制代码 代码示例:

example	example	example	example
example	example	提示窗口	example
example	example	example	example

这是提示窗口的正文区域，可以在这里填写任何内容。

jquery中文网，欢迎大家的光临!

总结：

1、popup_show 是将窗口显现的函数，popup_exit 是将窗口退出的函数，popup_mousepos是获取鼠标点击位置的函数。

2、document.getElementById("tableid").onclick = function(){popup_exit('init');}是为了传入参数init，在绑定时，会运行一下popup_exit函数，因此传入init参数可以将popup_exit绑定上去。

3、点击“弹出窗口”，则窗口显现出来，对table进行时间绑定；点击“table”，则关闭窗口。

有兴趣的朋友，动手测试下吧，看看弹出的div层的效果如何！