JS实现在鼠标点击位置创建弹窗

雨点打透心脏的1/2处 2022-10-29 07:52 345阅读 0赞

### JS实现在鼠标点击位置创建弹窗 ###

*  前言
 *  功能预览
 *  代码详情
 *  备注

# 前言 #

最近在做一个功能，当鼠标进行点击事件时，在鼠标所在位置创建一个弹窗出来，展示所选内容，并进行提交，由于项目没有使用任何前端组件，所以只能用原生JS实现。

# 功能预览 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmczNTM5MzM1NDY_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmczNTM5MzM1NDY_size_16_color_FFFFFF_t_70_pic_center 1]

# 代码详情 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
      <style type="text/css">
        #popupDiv {
          
          position: absolute;
          width: 280px;
          z-index: 1;
          background-color: #EDF2FC;
        }
        #popupDiv #contentDiv{
          
          margin: 5px;
          width: 90px;
          float: left;
          text-align: center;
        }
        #popupDiv #closeDiv{
          
          float: right;
        }
      </style>
      <script type="text/javascript" language="JavaScript">
        function openPopup(val) {
          
          var posX = 0, posY = 0;
          var event = event || window.event;
          if (event.pageX || event.pageY) {
          
            posX = event.pageX;
            posY = event.pageY;
          } else if (event.clientX || event.clientY) {
          
            posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
          }
    
          creatDiv(val);
    
          //判断浏览器是否Chrome
          var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
    
          if (isChrome) {
          
            document.getElementById("popupDiv").style.left = posX + "px";
            document.getElementById("popupDiv").style.top = posY + "px";
          } else {
          
            //不是Chrome，默认为IE
            document.getElementById("popupDiv").style.pixelLeft = posX;
            document.getElementById("popupDiv").style.pixelTop = posY;
          }
        }
    
        //创建弹窗DIV
        function creatDiv(content) {
          
          if (document.getElementById("popupDiv")) {
          
            document.getElementById("popupDiv").style.display = "block";
            document.getElementById("ccomephone").value = content;
            document.getElementById("bcome");
          } else {
          
            var s = document.createElement("div");
            s.innerHTML = "<div id = 'popupDiv' style = 'cursor : hand'> <div id = 'closeDiv'><img src = 'delete.png' onclick = 'closePopup()' style='cursor : hand; width:14px;'/></div><div id = 'contentDiv'><input οnclick='this.select();' type=\"text\" size = \"40\" id = \"ccomephone\" value=" + content + " style='width: 232PX;margin-top: 26px;margin-left: 13px;margin-bottom: 7px;'><input id = \"bcome\" style='margin-left: 108px;' type=\"button\" value=\"提交\" οnclick=\"doSubmit();\"/></div></div>";
            document.getElementsByTagName("body")[0].appendChild(s);
          }
        }
    
        //提交数据
        function doSubmit() {
          
          //dosomething
          document.getElementById("popupDiv").style.display = 'none';
        }
    
        //关闭弹窗
        function closePopup() {
          
          document.getElementById("popupDiv").style.display = 'none';
        }
      </script>
    </head>
    <body>
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容1')">
        内容1
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容2')">
        内容2
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容3')">
        内容3
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容4')">
        内容4
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容5')">
        内容5
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容6')">
        内容6
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容7')">
        内容7
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容8')">
        内容8
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容9')">
        内容9
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容10')">
        内容10
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容11')">
        内容11
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容12')">
        内容12
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容13')">
        内容12
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容14')">
        内容14
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容15')">
        内容15
      </div>
    
      <div style="margin-bottom: 50px;  margin-top: 50px;  margin-left: 50px;" onclick="openPopup('内容16')">
        内容16
      </div>
    </body>
    </html>

# 备注 #

和html同目录下，需存贮一个名称为delete.png的图片  
![在这里插入图片描述][20210210103112655.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmczNTM5MzM1NDY_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/ce1d3ea55ca842569ad51a662f637995.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmczNTM5MzM1NDY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/153558d481964632b553198acc1aea8a.png
[20210210103112655.png_pic_center]: /images/20221024/597310d93bc14f8bac91dfd065ee31c6.png