FIG effect, the corresponding button is clicked, the playing box is shown below the corresponding button, and the like may be applied to a list of scenes
Front-end code
<%@ 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</Open pop> <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 = to false ; var T = obj.getBoundingClientRect () Top;. // Get element distance from the top of the page var L = obj.getBoundingClientRect () left;. // Get element distance from the left of the page var SH = document.documentElement .scrollTop; // page scroll bar to scroll height var height = obj.offsetHeight; // Get element height // set the position of the frame shells $ ( " #divColor " ) .css ( " left " , L); $("#divColor").css("top", t + height + sh + 5); $("#divColor").show(); } // click of a button and a place to hide bombs that box bomb box document.body.addEventListener ( ' the Click ' , function () { outside = true }, true) document.body.addEventListener('click', function () { if (outside) { $("#divColor").hide(); } }, false) </script> </html>
There are two places of note
1) frame position obtaining bomb
var T = obj.getBoundingClientRect () Top;. // Get element distance from the top of the page var L = obj.getBoundingClientRect () left;. // Get element distance from the left of the page var SH = document.documentElement.scrollTop; / / page scroll bar to scroll height var height = obj.offsetHeight; // Get element height // set the position of the frame shells $ ( "# divColor") CSS ( "left." , L); $("#divColor").css("top", t + height + sh + 5); $("#divColor").show();
getBoundingClientRect () for acquiring vertical and horizontal distance elements to the current window, plus buttons to get the page up / right rolling coordinate position on the page length, the button that x, y coordinates (here only the addition of the page the length of the rolling line, x coordinate plus their necessary), the coordinates obtained after the height of the push button plus the appropriate offset position of the button and then get down the playing box
Can refer https://www.cnblogs.com/woodyliang/p/6497554.html
2) a location other than the click of a button hidden bombs and bomb box box
// click of a button and a place to hide bombs that box bomb box document.body.addEventListener ( 'the Click', function () { outside = true }, true) document.body.addEventListener('click', function () { if (outside) { $("#divColor").hide(); } }, false)
The key is the above two methods, reference https://blog.csdn.net/yimawujiang/article/details/86496936
addEventListener usage reference https://blog.csdn.net/qq_29606781/article/details/67650869