javascript浮层iframe举例

最新推荐文章于 2022-03-04 15:31:42 发布

转载最新推荐文章于 2022-03-04 15:31:42 发布 · 2.2k 阅读

文章标签：

#javascript #iframe #jquery #xhtml #class #button

javascript 专栏收录该内容

42 篇文章

订阅专栏

本文展示了如何使用jQuery实现鼠标点击事件触发浮层弹出的效果，包括定位、样式和关闭功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出浮层测试</title>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script language="javascript">
//+--------------------------------------------
//需要jquery-1.4.4.min.js 以上版本，并 jQuery.noConflict();
//+--------------------------------------------
//页面上相对某个点击事件定位通用函数

function absoluteLocate(e,x,y,divID) {
	if(!e) {
		e = window.event;
	}
	var bodyScrollTop = (document.compatMode == "CSS1Compat") ? document.documentElement.scrollTop : document.body.scrollTop;
	var bodyScrollLeft = (document.compatMode == "CSS1Compat") ? document.documentElement.scrollLeft : document.body.scrollLeft;

	var posx = 0;
	var posy = 0;
	//FF特有
	if (e.pageX || e.pageY)
	{
		posx = e.pageX + x;
		posy = e.pageY + y;
	}
	//clientX 通用属性
	else
	{
		posx = e.clientX + bodyScrollLeft + x;
		posy = e.clientY + bodyScrollTop + y;
	}
	jQuery("#"+divID).css("left",posx+"px").css("top",posy+"px");
	jQuery("#"+divID).toggle();
}
</script>
<style>
.myTestDiv{
    position:absolute;
    left:0px;
    top:0px;
    z-index:9999999;
    width:470px;
    height:auto;
    border:#555555 2px solid;
    background-color:#FFFFFF;
    padding-bottom:6px;
    display:none;
}
.myTestDiv  .myTestDivTitle{
    position:absolute;
    right:2px;
    top:2px;
    filter:alpha(opacity=80);
    opacity:0.8;
}
</style>
</head>
<body>
<div>
    <input type='button' name='showDiv' value='显示浮层' onclick="absoluteLocate(event,10,20,'myTestDiv')"/>
</div>
<div id='haha'>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
    okokokokokokokokokokokokokokokokokokok<br/>
</div>
<!--网站质量分类历史浮层-->
<div id="myTestDiv" class="myTestDiv">
    <div class="myTestDivTitle">
        <a href="javascript:void(0);" onClick="jQuery('#myTestDiv').hide();return false;">关闭</a>
    </div>
    <iframe id="myTestIfr" name="myTestIfr" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" src="http://www.baidu.com"></iframe>
</div>
</body>
</html>