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

Answer 1

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>

Answer 2

Check this links

It shows you how to create custom menus, and from now on you can apply it to your problem

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

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

Answer 3

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?

Question

2 answers

solution1
4 2020-12-18 14:52:46

solution2
1 2018-03-13 01:26:14

Check this links

solution3
0 ACCPTED 2018-03-13 01:47:07

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

Question

2 answers

solution1 4 2020-12-18 14:52:46

solution2 1 2018-03-13 01:26:14

Check this links

solution3 0 ACCPTED 2018-03-13 01:47:07

solution1
4 2020-12-18 14:52:46

solution2
1 2018-03-13 01:26:14

solution3
0 ACCPTED 2018-03-13 01:47:07