js在點擊的按鈕下面彈框

時間  2019-12-08
標籤 點擊 按鈕 下面 欄目 JavaScript 简体版
原文   原文鏈接

效果如圖，點擊對應的按鈕時，彈框會在對應的按鈕下面顯示，能夠應用於列表等場景javascript

前端代碼css

<%@ 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>
View Code

主要有兩個注意的地方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座標須要的話本身加上），獲得按鈕的座標以後加上按鈕的高度再適當往下偏移就獲得彈框的位置java

能夠參考http://www.javashuo.com/article/p-wgzxwhfq-mw.htmljquery

2）點擊按鈕和彈框之外的位置隱藏彈框ide

 //點擊按鈕和彈框覺得的地方隱藏彈框
    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/86496936this

addEventListener用法參考https://blog.csdn.net/qq_29606781/article/details/67650869
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程