js弹出层示例代码

最新推荐文章于 2023-02-06 10:07:56 发布

shihuan830619

最新推荐文章于 2023-02-06 10:07:56 发布

阅读量106

点赞数

分类专栏： JavaScript html 文章标签： html js ViewUI

本文链接：https://blog.csdn.net/shihuan830619/article/details/84610044

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

附件里是用js做的可运行的*.html文件。

鼠标单击弹出层后点击其他区域层消失.html代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.daohang {
	font-size:9pt;
	text-align:center;
	display: none;
	position: absolute;
	width:80px;
	padding: 3px 3px;
	line-height:18px;
	border: 2px solid #66CCFF;
	background-color: white;
}
</style>
<script>
function addEvent(obj,eventType,func){
	if(obj.attachEvent){
		obj.attachEvent("on" + eventType,func);
	} else {
		obj.addEventListener(eventType,func,false)
	}
}

function delEvent(obj,eventType,func){
	if(obj.detachEvent){
		obj.detachEvent("on" + eventType,func)
	} else {
		obj.removeEventListener(eventType,func,false)
	}
}

function clickOther(el){
	thisObj = el.target?el.target:event.srcElement;
	//alert(thisObj.tagName== "BODY")
	do{
		if(thisObj.id == "lightmenu") return;
		if(thisObj.tagName == "BODY"){
			hidemenu();
			return;
		};
		thisObj = thisObj.parentNode;
	}while(thisObj.parentNode);
}

function showmenu(evt){
	var light=document.getElementById("lightmenu");
    var _event = evt ? evt : event; 
	light.style.left=_event.clientX+document.body.scrollLeft+"px";
	light.style.top=_event.clientY+document.body.scrollTop+"px";
    light.style.display='block';
	addEvent(document.body,"mousedown",clickOther)
}

function hidemenu(){
	var light=document.getElementById("lightmenu");
	delEvent(document.body,"mousedown",showmenu);
	light.style.display='none';
}
</script>
</head>
<body style="height:100%;">
<a href="javascript:void(0)" onclick="showmenu(event)">更多</a>
<div id="lightmenu" class="daohang" >
<a href="/" target="_blank">首页</a><br>
<a href="/">首页</a><br>
<a href="/">首页</a><br>
<a href="/">首页</a><br>
<a href="/">首页</a><br>
<a href="/">首页</a><br>
<a href="#" onclick="hidemenu()">关闭</a>
</div>
</body>
</html>

鼠标单击弹出层.html文件代码如下:


<!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>
<style type="text/css">
.pop{
	width: 350px;
	height: 200px;
	border: 1px solid #00f;
	background-color: #ffffee;
	display: none;
	position:absolute;  
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function hidedetails(){
	$("#details").hide();
}

function showdetails(thisObj,orderid){
	var d = $(thisObj);
	var pos = d.offset();
	var t = pos.top + d.height() + 5; // 弹出框的上边位置
    var l = pos.left + d.width() - 60;  // 弹出框的左边位置
    $("#details").css({ "top": t, "left": l }).show();
	$("#details").html("订单 "+orderid+" 的内容！");
}
</script>
</head>
<body>
	<a href="javascript:void(0)" onmouseover="showdetails(this,1)" onmouseout="setTimeout(hidedetails,1000)">订单1</a>
	<a href="javascript:void(0)" onmouseover="showdetails(this,2)">订单2</a>
	<a href="javascript:void(0)" onmouseover="showdetails(this,3)">订单3</a>
	<a href="javascript:void(0)" onmouseover="showdetails(this,4)">订单4</a>
	<a href="javascript:void(0)" onmouseover="showdetails(this,5)" onmouseout="hidedetails()">订单5</a>
	<div id="details" class="pop"></div>
</body>
</html>

shihuan830619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js弹出层示例代码

附件里是用js做的可运行的*.html文件。鼠标单击弹出层后点击其他区域层消失.html代码如下:[code="java"].daohang { font-size:9pt; text-align:center; display: none; position: absolute; width:80px; padding: 3px 3px;...
复制链接

扫一扫