`
shihuan830619
  • 浏览: 580115 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js弹出层示例代码

htmljs 
阅读更多
附件里是用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>
分享到：
| JVM启动参数大全
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    轻量级JavaScript弹出层示例【优秀源码】

    在提供的压缩包中，你可以找到`轻量级JavaScript弹出层示例【优秀源码】`，这个文件应该包含了相关的示例代码和文档，通过查看和运行这些示例，可以更直观地了解和学习easyDialog的使用方法和技巧。如果你遇到任何...

    JS弹出层大集合。很多好用的JS弹出层代码

    JavaScript（简称JS）弹出层是一种常见的网页交互设计，它可以在用户与网页交互时弹出一个浮动窗口，显示额外的信息、提示或者进行某些操作。在网页开发中，弹出层通常用于实现模态对话框、警告提示、信息确认、表单...

    简单好用的JS 弹出层代码

    在网页开发中，JavaScript（JS）常常用于实现各种交互效果，其中之一就是弹出层功能。弹出层在用户界面上创建了一个临时突出显示的区域，用于显示额外的信息、提示、表单或者任何需要用户注意的内容，而不会中断主...

    js浮动弹出层示例。

    在这个特定的案例中，"js浮动弹出层示例"指的是利用JavaScript实现的一种网页元素，它能够在用户进行某些操作时，如点击按钮，从页面上弹出一个浮动窗口。这种浮动窗口通常用于显示警告、提示信息，或者提供额外的...

    JavaScript弹出层

    JavaScript弹出层是网页开发中常见的一种交互设计，它用于在用户与页面交互时提供额外信息、确认操作或展示复杂内容。Js弹出层库则是专门为此目的设计的JavaScript库，简化了弹出层的创建和管理过程。在这个场景中，...

    可自定义js弹出层动画特效.zip

    在这个"可自定义js弹出层动画特效.zip"压缩包中，我们找到了一个JavaScript弹出层插件，它专门设计用来增强用户体验，提供多样化的弹出层显示方式。 首先，让我们了解一下弹出层（Popup Layer）的概念。弹出层是在...

    js 弹出层之间值得传递

    总之，通过合理的编程技巧和设计模式，可以有效地在JavaScript弹出层之间传递值，提高应用程序的交互性和灵活性。在实际项目中，应根据具体需求选择合适的方法，同时注意代码的可维护性和性能优化。

    js弹出层table运用

    最后，从提供的文件名`js弹出层table运用.htm`来看，这是一个HTML文件，可能包含了实现上述功能的代码示例。分析这个文件可以帮助你更具体地了解如何将理论应用到实际项目中。通过学习和实践，你可以掌握创建交互式...

    C#弹出框示例代码.rar

    只需在后台代码中处理事件，然后使用ModalPopupExtender控件将弹出层定位在适当位置。 4. **Bootstrap Modal**：Bootstrap框架提供了一种创建响应式弹出框的方法，适用于各种设备。在C# ASP.NET中，可以结合 Razor ...

    很犀利的弹出层，弹出层代码

    由于没有具体的压缩包文件内容，我们无法详细分析代码实现，但可以从标签“弹出层”推测，这个压缩包可能包含一个或多个示例文件，如HTML、CSS和JavaScript文件，展示了如何创建和应用弹出层。文件名“339”可能是...

    纯js弹出层layer跨Iframe完美回调

    使用Layer插件时，开发者需要按照文档或示例代码来调用其API，例如创建弹出层、设置内容、关闭弹出层等。对于跨Iframe回调，需要设置特定的事件监听器，并使用window.postMessage方法来发送和接收消息。通过这种方式...

    jquery 弹出层示例（含插件）

    而“jQuery 弹出层示例（含插件）”是针对网页交互中常见的一种功能——弹出层的实现，旨在帮助开发者解决弹出层在不同场景下的兼容性和用户体验问题。 弹出层，也称为模态窗口或对话框，是一种在用户与网页交互时...

    jquerry弹出层示例

    本文将详细探讨"jQuery弹出层示例"，以及如何结合导航栏和下拉菜单来增强用户体验。 首先，让我们理解什么是jQuery弹出层。弹出层，也称为模态窗口或对话框，是在网页上覆盖一层半透明或者完全不透明的元素，以突出...

    国外超强JS弹出层，浏览图片及弹出文字层的利器

    2. `examples`：这是一个文件夹，可能包含了多个示例文件，展示了JS弹出层的各种使用方式和场景，用户可以通过这些例子学习如何在自己的项目中应用该库。 3. `highslide`：很可能这是弹出层库的核心代码，包含...

    jQuery顶部浮动弹出层动画弹出层特效

    在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中，我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果，特别是在页面顶部浮动的设计。 首先，让我们了解什么是弹出层。弹出层是一种网页设计技术，它...

    js弹出层 下载直接用

    综上所述，"js弹出层 下载直接用"的资源提供了完整的弹出层实现，涵盖了从HTML结构到JavaScript逻辑，再到CSS样式和图片资源的全套解决方案，是学习和快速应用JavaScript弹出层功能的良好实例。

    简单精美js弹出层效果

    在提供的"prmar_简单弹出层"文件中，可能包含了实现上述步骤的HTML、CSS和JavaScript代码示例，你可以通过学习和理解这些代码，进一步掌握js弹出层的制作方法。在实际项目中，还可以根据需求扩展功能，例如添加...

    原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效

    通过以上步骤，我们就可以实现一个简单的原生JavaScript弹出层功能。需要注意的是，实际开发中可能需要考虑到不同浏览器的兼容性，以及更复杂的情况，比如防止弹出层被多次打开、处理键盘事件等。此外，对于复杂的弹...

    自定义js弹出窗口（弹出层）

    在网页开发中，自定义js弹出窗口，也被称为弹出层或对话框，是一种常见的交互设计技术。这种技术允许开发者在用户与页面交互时显示额外的信息或功能，而不会中断主页面的工作流程。在本教程中，我们将深入探讨如何...

Magicbox
Global site tag (gtag.js) - Google Analytics