效果如图，点击对应的按钮时，弹框会在对应的按钮下面显示，可以应用于列表等场景

前端代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="解密.WebForm1" %>

<!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 runat="server">

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type ="text/javascript" ></script>

</head>

<body>

    <form runat ="server" >

    <button id="btn" onclick="showdlgColor(this);return false;">打开弹窗</button>

    <br />

    <br />

    <br />

    <br />

    <button id="Button1" onclick="showdlgColor(this);return false;">打开弹窗</button>

    <div id ="divColor" style ="width:145px; display:none; padding :10px; border:1px solid gray; position :absolute ; background-color:White ;  border-radius: 3px; overflow:hidden" onclick ="outside=false"  >

        <div style =" padding:8px ; display:inline-block; background-color:#609022; margin:5px;"  OnClientClick="alert(111);"></div>

        <asp:LinkButton ID ="btngreen" runat ="server"  CommandArgument ="#609022" style =" padding:8px ; display:inline-block; background-color:#609022; margin:5px;"  OnClientClick="alert(1);"></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton1" runat ="server"  CommandArgument ="#aa41cd" style =" padding:8px ; display:inline-block; background-color:#aa41cd; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton2" runat ="server" CommandArgument ="#35909e" style =" padding:8px ; display:inline-block; background-color:#35909e; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton3" runat ="server" CommandArgument ="#3d6aaa" style =" padding:8px ; display:inline-block; background-color:#3d6aaa; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton4" runat ="server" CommandArgument ="#4d53a5" style =" padding:8px ; display:inline-block; background-color:#4d53a5; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton5" runat ="server" CommandArgument ="#b48e43" style =" padding:8px ; display:inline-block; background-color:#b48e43; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton6" runat ="server" CommandArgument ="#c26502" style =" padding:8px ; display:inline-block; background-color:#c26502; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton7" runat ="server" CommandArgument ="#b3341a" style =" padding:8px ; display:inline-block; background-color:#b3341a; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton8" runat ="server" CommandArgument ="#c24d96" style =" padding:8px ; display:inline-block; background-color:#c24d96; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton9" runat ="server" CommandArgument ="#b20e0e" style =" padding:8px ; display:inline-block; background-color:#b20e0e; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton10" runat ="server" CommandArgument ="#e59c00" style =" padding:8px ; display:inline-block; background-color:#e59c00; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton11" runat ="server" CommandArgument ="#ec6928" style =" padding:8px ; display:inline-block; background-color:#ec6928; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton12" runat ="server" CommandArgument ="#9d569d" style =" padding:8px ; display:inline-block; background-color:#9d569d; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton13" runat ="server" CommandArgument ="#955959" style =" padding:8px ; display:inline-block; background-color:#955959; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton14" runat ="server" CommandArgument ="#ae7841" style =" padding:8px ; display:inline-block; background-color:#ae7841; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton15" runat ="server" CommandArgument ="#abab4e" style =" padding:8px ; display:inline-block; background-color:#abab4e; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton16" runat ="server" CommandArgument ="#ec5105" style =" padding:8px ; display:inline-block; background-color:#ec5105; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton17" runat ="server" CommandArgument ="#ab4646" style =" padding:8px ; display:inline-block; background-color:#ab4646; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton18" runat ="server" CommandArgument ="#950695" style =" padding:8px ; display:inline-block; background-color:#950695; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton19" runat ="server" CommandArgument ="#703b70" style =" padding:8px ; display:inline-block; background-color:#703b70; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton20" runat ="server" CommandArgument ="#3b994f" style =" padding:8px ; display:inline-block; background-color:#3b994f; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton21" runat ="server" CommandArgument ="#21b1b1" style =" padding:8px ; display:inline-block; background-color:#21b1b1; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton22" runat ="server" CommandArgument ="#1e87ef" style =" padding:8px ; display:inline-block; background-color:#1e87ef; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton23" runat ="server" CommandArgument ="#4b9d8f" style =" padding:8px ; display:inline-block; background-color:#4b9d8f; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton24" runat ="server" CommandArgument ="#7c657c" style =" padding:8px ; display:inline-block; background-color:#7c657c; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton25" runat ="server" CommandArgument ="#5487ed" style =" padding:8px ; display:inline-block; background-color:#5487ed; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton26" runat ="server" CommandArgument ="#354b66" style =" padding:8px ; display:inline-block; background-color:#354b66; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton27" runat ="server" CommandArgument ="#2768ea" style =" padding:8px ; display:inline-block; background-color:#2768ea; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton28" runat ="server" CommandArgument ="#7044b2" style =" padding:8px ; display:inline-block; background-color:#7044b2; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton29" runat ="server" CommandArgument ="#1f28df" style =" padding:8px ; display:inline-block; background-color:#1f28df; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton30" runat ="server" CommandArgument ="#a59f79" style =" padding:8px ; display:inline-block; background-color:#a59f79; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton31" runat ="server" CommandArgument ="#8899ab" style =" padding:8px ; display:inline-block; background-color:#8899ab; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton32" runat ="server" CommandArgument ="#585858" style =" padding:8px ; display:inline-block; background-color:#585858; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton33" runat ="server" CommandArgument ="#343434" style =" padding:8px ; display:inline-block; background-color:#343434; margin:5px;" ></asp:LinkButton>

        <asp:LinkButton ID ="LinkButton34" runat ="server" CommandArgument ="#000" style =" padding:8px ; display:inline-block; background-color:#000; margin:5px;" ></asp:LinkButton>

        <asp:HiddenField ID ="hfdlgFlagCode" runat ="server" />

    </div>

    </form>

</body>

<script type="text/javascript">

    var outside = true

    function showdlgColor(obj) {

        outside = false;

        var t = obj.getBoundingClientRect().top; //获取元素距离页面上边的距离

        var l = obj.getBoundingClientRect().left; //获取元素距离页面左边的距离

        var sh = document.documentElement.scrollTop; //网页滚动条滚动的高度

        var height = obj.offsetHeight; //获取元素高度

        //设置弹框位置

        $("#divColor").css("left", l);

        $("#divColor").css("top", t + height + sh + 5);

        $("#divColor").show();

    }

    //点击按钮和弹框以为的地方隐藏弹框

    document.body.addEventListener('click', function () {

        outside = true

    }, true)

    document.body.addEventListener('click', function () {

        if (outside) {

            $("#divColor").hide();

        }

    }, false)

</script>

</html>

主要有两个注意的地方

1）获取弹框的位置

        var t = obj.getBoundingClientRect().top; //获取元素距离页面上边的距离

        var l = obj.getBoundingClientRect().left; //获取元素距离页面左边的距离

        var sh = document.documentElement.scrollTop; //网页滚动条滚动的高度

        var height = obj.offsetHeight; //获取元素高度

        //设置弹框位置

        $("#divColor").css("left", l);

        $("#divColor").css("top", t + height + sh + 5);

        $("#divColor").show();

getBoundingClientRect()用于获取元素到当前窗口上下左右的距离，要得到按钮在页面的坐标位置 还要加上网页往上/往右滚动的长度，得到按钮的x，y坐标（这里只加了网页网上滚动的长度，x坐标需要的话自己加上），得到按钮的坐标之后加上按钮的高度再适当往下偏移就得到弹框的位置

可以参考https://www.cnblogs.com/woodyliang/p/6497554.html

2）点击按钮和弹框以外的位置隐藏弹框

 //点击按钮和弹框以为的地方隐藏弹框

    document.body.addEventListener('click', function () {

        outside = true

    }, true)

    document.body.addEventListener('click', function () {

        if (outside) {

            $("#divColor").hide();

        }

    }, false)

关键是以上两个方法，参考https://blog.csdn.net/yimawujiang/article/details/86496936

addEventListener用法参考https://blog.csdn.net/qq_29606781/article/details/67650869

js在点击的按钮下面弹框的更多相关文章

  1. vue中超简单的方法实现点击一个按钮出现弹框，点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  2. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  3. Three.js中的div标签跟随(模型弹框)

    目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...

  4. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  5. js实现点击不同按钮切换内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js动态加载的蒙板弹框

    我们访问一些网站时总会遇到这种点击后,背景像被打上一层模板一样,这个是怎么做到的呢? 它是将这个弹框div独立于页面容器wrap,设置position为absolute,将其水平垂直之后都居中,设置弹 ...

  7. jquery实现点击页面空白处，弹框消失

    要求:点击1,弹框2显示,点击空白处,弹框2消失 $("#AddDevices"):按钮1 $(".addDeviceBox")弹框2 //点击添加设备弹框 $ ...

  8. js实现点击评论进行显示回复框

    有人在群里问如何在留言评论那里点击回复按钮,下面就自动显示一个回复框,他想要的效果如图: 于是我随意的写了一段HTML,代码如下: <!DOCTYPE HTML> <html lan ...

  9. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

随机推荐

  1. kubernetes之secret

    Secret解决了密码.token.密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者Pod Spec中.Secret可以以Volume或者环境变量的方式使用. Secret类型: Opa ...

  2. leetcode 55 Jump Game 三种方法，回溯、动态规划、贪心

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  3. TCP/IP学习笔记2--协议分层与OSI参考模型

    协议的分层: 为解决不同计算机之间的通信,ISO(International Organization for Standards)指定了一个国际标准OSI(Open Systems Intercon ...

  4. python-tkinter使用方法——转载(二)

    转载URL:https://www.cnblogs.com/yudanqu/p/9467803.html Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包 ...

  5. （转）Nginx+rtmp+ffmpeg搭建流媒体服务器

    (1)下载第三方扩展模块nginx-rtmp-module # mkdir module && cd module //创建一个存放模块的目录 # wget https://githu ...

  6. PKUSC2019题解

    $D1T1$:$n$个村庄,第$i$个村庄的人要去第$p_i$个村庄(保证$p_i$为排列),每次可以将相邻两个村庄的人位置交换直到所有人都到达目的地.再给定一个长为$n-1$的排列$a$,表示第$i ...

  7. Maven过滤属性文件，替换属性值

    pom.xml 1.resources: resources中是定义哪些目录下的文件会被配置文件中定义的变量替换,一般我们会把项目的配置文件放在src/main/resources下,像db,bean ...

  8. .NET Core AvaloniaUI实现多语言国际化

    AvaloniaUI是一个基于.Net Core的跨平台桌面程序UI框架,如果使用AvaloniaUI有多语言国际化的朋友可以参考我这篇文章: 这篇文章可以帮助你: 根据用户系统设置的语言改变UI显示 ...

  9. iOS - 安装CocoaPods详细过程(重装系统后！)

    重装的系统,发现很多东西都要重装,顺便复习和检验下以前的方法还有没有效 一.简介 什么是CocoaPods CocoaPods是OS X和iOS下的一个第三类库管理工具,通过CocoaPods工具我们 ...

  10. 在SQL Server中，为何都建议禁止 VIA 协议，VIA协议具体内容是什么？

    在SQL Server 在SQL Server中,为何都建议禁止 VIA 协议,VIA协议具体内容是什么? 中,为何都建议禁止 VIA 协议,VIA协议具体内容是什么? 在SQL Server中,为何 ...