检查此链接

Question

我希望用户能够右键单击并让自定义内容菜单有两个选择：

联络（链接https://rowurbux.weebly.com/contact.html）支持（链接https://rowurbux.weebly.com/support.html）

<html>

<head>
  <script type="text/javascript">
    if (document.addEventListener) { // IE >= 9;other browsers 
      document.addEventListener('contextmenu', function(e) {
        alert("You've tried to open context menu"); //here you draw your own menu
        e.preventDefault();
      }, false);
    } else { // IE < 9 
      document.attachEvent('oncontextmenu', function() {
        alert("You've tried to open context menu");
        window.event.returnValue = false;
      });
    }
  </script>
</head>

<body> Lorem ipsum... </body>

</html>

请帮帮我吧！

谢谢大家，
将

JS或HTML答案是可以实现的

Answer 1

这是纯JavaScript的简单上下文菜单

const element = document.getElementById("box1");

const listElement = document.getElementById("list");

const onClickOutside = (event) => {
  listElement.style.display = "none";
  document.removeEventListener("click", onClickOutside);
};

listElement.addEventListener("contextmenu", (event) => {
  event.stopPropagation();
});

listElement.addEventListener("mouseup", (event) => {
  event.stopPropagation();
});

document.addEventListener("contextmenu", (event) => {
  listElement.style.display = "none";
});

listElement.addEventListener("click", (event) => {
  event.stopPropagation();
});

element.addEventListener("mouseup", (event) => {
  event.stopPropagation();
  if (event.button === 2) {
    return;
  }
});

element.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  event.stopPropagation();
  document.addEventListener("click", onClickOutside);
  const x = event.offsetX;
  const y = event.offsetY - 15;
  listElement.style.display = "block";
  listElement.style.top = y + "px";
  listElement.style.left = x + "px";
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.section {
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.box1 {
  position: relative;
  height: 400px;
  width: 400px;
  background-color: #e7e7e7;
}

.list {
  display: none;
  position: absolute;
  list-style: none;
  background-color: #fff;
  width: 100px;
  padding: 0;
}

.list li {
  padding: 10px;
  cursor: pointer;
}

.list li a{
  padding: 0;
  text-decoration: none;
  color: #333;
}

.list li a:hover, .list li:hover a{
  text-decoration: none;
  color: #fff;
}

.list li:hover {
  background-color: #333;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <section class="section">
      <div class="left_panel">
        <div class="box1" id="box1">
          <p>Right Click on anywhere inside place to get links in context menu</p>
          <ul class="list" id="list">
            <li><a href="https://rowurbux.weebly.com/contact.html">Contact</a></li>
            <li><a href="https://rowurbux.weebly.com/support.html">Support</a></li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

Answer 2

检查此链接

它向您展示了如何创建自定义菜单，从现在开始，您可以将其应用于您的问题

How to add a custom right-click menu to a webpage?

https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

Answer 3

使用：D HTML代码：

      <script >


    if (document.addEventListener) { // IE >= 9;other browsers 
      document.addEventListener('contextmenu', function(e) {
       var modal = document.getElementById('myModal');
 modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
        e.preventDefault();
      }, false);
    } else { // IE < 9 
      document.attachEvent('oncontextmenu', function() {
         var modal = document.getElementById('myModal');
 modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
        window.event.returnValue = false;
      });
    }
  </script>


<p>custom contentmenu as modal </p>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
   <p> <a href=" https://rowurbux.weebly.com/contact.html">Contact</a></p>
     <p> <a href="https://rowurbux.weebly.com/support.html">Support</a></p>
  </div>

</div>

css代码：

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

在右键单击xD后，我将其更改为情绪打开祝你好运xD

如何获取自定义右键单击上下文菜单以显示指向我网站上某个页面的两个链接？

3 个答案:

检查此链接