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

最新推荐文章于 2023-03-16 15:54:01 发布

在下令狐

最新推荐文章于 2023-03-16 15:54:01 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： html js javascript

本文链接：https://blog.csdn.net/yang353933546/article/details/113779521

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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

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

前言

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

功能预览

在这里插入图片描述

代码详情

<!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的图片
在这里插入图片描述

在下令狐

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS实现在鼠标点击位置创建弹窗

JS实现在鼠标点击位置创建弹窗前言功能预览代码详情备注前言    最近在做一个功能，当鼠标进行点击事件时，在鼠标所在位置创建一个弹窗出来，展示所选内容，并进行提交，由于项目没有使用任何前端组件，所以只能用原生JS实现。功能预览代码详情<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title><
复制链接

扫一扫