点击随着某个位置而弹出的弹出层_在自适应网页,写点击弹框跟随,怎么定位?-优快云博客

本文介绍了一种使用jQuery实现的动态调整弹出框位置的方法。当用户点击不同位置的链接时，弹窗会根据被点击元素的位置进行相应调整，确保用户体验的同时展示了基本的DOM操作技巧。

摘要生成于 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>
<style type="text/css">
a{
border: 1px solid #0f0;
margin: 20px;
width: 60px;
height: 30px;
line-height: 30px;
float: left;
display: block;
text-align: center;
}
.pop{
width: 350px;
height: 200px;
border: 1px solid #00f;
background-color: #ffffee;
display: none;
position:absolute; /* 注：弹出框必须为绝对定位 */
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">

function showdetails(thisObj,orderid){
var d = $(thisObj);
var pos = d.offset();
var t = pos.top + d.height(); // 弹出框的上边位置
var l = pos.left + d.width(); // 弹出框的左边位置
$("#details").css({ "top": t, "left": l }).show();
}

</script>
</head>
<body>
<a href="javascript:void(0)" onclick="showdetails(this)" >订单1</a>
<a href="javascript:void(0)" onclick="showdetails(this)" >订单2</a>
<a href="javascript:void(0)" onclick="showdetails(this)">订单3</a>
<a href="javascript:void(0)" onclick="showdetails(this)">订单4</a>
<a href="javascript:void(0)" onclick="showdetails(this)">订单5</a>
<div id="details" class="pop">
</div>
</body>
</html>