How to Add a Custom Right-Click Menu to a Webpage

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

Answering your question - use contextmenu event, like below:

if (document.addEventListener) {  document.addEventListener('contextmenu', function(e) {    alert("You've tried to open context menu"); //here you draw your own menu    e.preventDefault();  }, false);} else {  document.attachEvent('oncontextmenu', function() {    alert("You've tried to open context menu");    window.event.returnValue = false;  });}

<body>  Lorem ipsum...</body>

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

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">×</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

Javascript toggle default and custom contextmenu on right-click

Simply set up the handler to only work on those elements that you need the custom menu to appear. You can do this easily by applying a class to any element that is supposed to use the custom menu and then listening for the right-click at the document level and leveraging event delegation.

The red items below are configured for a custom right-click.

let modal = document.getElementById("contextMenu");

// Set up an event handler for the documnt right click
document.addEventListener("contextmenu", function(event) {
  // Only do something when the element that was actually right-clicked
  // on has the right class to trigger the menu
  if(event.target.classList.contains("customMenu")){
    event.preventDefault();
    modal.classList.remove("hidden");
  }
});

// Close the menu when you left click anywhere
document.addEventListener("click", function(event){
  modal.classList.add("hidden");
});

.hidden {display:none;}
.customMenu { font-weight:bold; color:#f00; }
#contextMenu {
  position:absolute; 
  border:2px double #333; 
  width:150px; 
  height:175px;
  top:20%;
  left:30%;
  background-color:#e0e0e0;
  box-shadow:5px 5px #909090;
}

<div class="customMenu">1</div>
<div id="one">2</div>
<div class="customMenu">3</div>
<div>4</div>
<div>5
  <span class="customMenu">6</span>
</div>
<div>6
  <h1>7
    <div class="customMenu">8</div>
  </h1>
</div>
<div class="customMenu">9</div>

<div id="contextMenu" class="hidden">
  <ul>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
  </ul>
</div>

Custom right click menu on all a elements

You can use document.querySelectorAll, which returns a NodeList of all matched elements, instead of document.querySelector which only returns the first matched element in the DOM.

document.querySelectorAll('a')
   .forEach(a=>a.addEventListener("contextmenu", onContextMenu, false));
function onContextMenu(e){
  e.preventDefault()
  e.stopPropagation() //important!!

  //move element
  ctxmenu.style.top = e.y + 'px'
  ctxmenu.style.left = e.x + 'px'

  //show element
  ctxmenu.classList.add('show')
}

Youtube's custom right click menu options

That's just the browser default contextmenu when you right click any video.

To create a custom contextmenu, check this out: How to add a custom right-click menu to a webpage?

How to Add a Custom Right-Click Menu to a Webpage