How do I get a custom right-click context menu to show two links to a page on my site?

Question

I want users to be able to right click and have the custom contentmenu have two choices:

Contact (with link https://rowurbux.weebly.com/contact.html) Support (with link 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>

Help me out with this please!

Thanks everybody,
Will

A JS or HTML answer is perferrable

What have you tried so far? **"source code", "research"**? And what part of one of those did you have problems with? StackoverFlow is not a free writing service for you to drop requests to be provided with free source code. — NewToJS, Mar 13 '18 at 01:12
Not sure how to get that to show up with links since it just creates a JS alert popup. — will, Mar 13 '18 at 01:16
[First search result for "javascript context menu"](https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/). — AuxTaco, Mar 13 '18 at 01:25
When copy and paste fails, be sure to ask for more free copy and paste. Don't you think you will have to make a hidden div with the appropriate links that is styled to fixed display at the appropriate cursor position when someone right clicks? — Justin, Mar 13 '18 at 01:53

thezeenagari · Answer 1 · 2020-12-18T14:58:08.747

Here is simple Context menu in pure 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>

Thanks this helped me. I also faced the same problem. – Ilyas karim Dec 18 '20 at 17:19 — Ilyas karim, Dec 18 '20 at 17:19

Piotr Mirosz · Accepted Answer · 2018-03-13T01:55:33.810

use that :D HTML code:

      <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 code:

.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;
}

I change it for moodal opened after right mouse click xD good luck xD

How do I get a custom right-click context menu to show two links to a page on my site?

2 Answers2