offset+position点击按钮弹出提示框，且提示框紧贴按钮

最新推荐文章于 2022-03-14 10:41:37 发布

霜月枫桥

最新推荐文章于 2022-03-14 10:41:37 发布

阅读量721

点赞数

分类专栏： web开发

本文链接：https://blog.csdn.net/MOONCOM/article/details/53817766

版权

web开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

实现效果：点击按钮弹出绿色区域，绿色区域紧贴按钮，且缩小浏览器边框时，绿色区域依旧紧贴按钮。

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(function(){
var top=$("#input1").offset().top;
var left=$("#input1").offset().left-100;


$("#div1").css({
"top":top,
"left":left,
});


$("#input1").click(function(){
if('true'==$("#div1").attr("class")){
$("#div1").attr("class","false");
}else{
$("#div1").attr("class","true")
}
});
});


$(window).resize(function(){
var top=$("#input1").offset().top;
var left=$("#input1").offset().left-100;


   $("#div1").css({
"top":top,
"left":left,
});
});
</script>


<style>
#div1{
width:100px;
height:100px;
background-color:green;
position:absolute;
z-index:100px;
}


#input1{
margin-top:250px;
margin-left:400px;
}


.false{
display:none;
}


.true{
display:block;
}
</style>
</head>
<body>
<div id="div1" class="false"></div>
<div>
<input type="button" value="点击" id="input1">
</div>
</body>
</html>

霜月枫桥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
offset+position点击按钮弹出提示框，且提示框紧贴按钮

实现效果：点击按钮弹出绿色区域，绿色区域紧贴按钮，且缩小浏览器边框时，绿色区域依旧紧贴按钮。代码如下：$(function(){var top=$("#input1").offset().top;var left=$("#input1").offset().left-100;$("#div1").css({"top":top,"left":left,});
复制链接

扫一扫

专栏目录