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

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

Contact (with link .html) Support (with link .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>

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

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

Share Improve this question edited Mar 13, 2018 at 1:18 Obsidian Age 42.4k11 gold badges53 silver badges76 bronze badges asked Mar 13, 2018 at 1:08 will 711 gold badge3 silver badges8 bronze badges

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 Commented Mar 13, 2018 at 1:12
this code: <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> – will Commented Mar 13, 2018 at 1:16
Not sure how to get that to show up with links since it just creates a JS alert popup. – will Commented Mar 13, 2018 at 1:16
First search result for "javascript context menu". – AuxTaco Commented Mar 13, 2018 at 1: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 Commented Mar 13, 2018 at 1:53

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

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./contact.html">Contact</a></li>
            <li><a href="https://rowurbux.weebly./support.html">Support</a></li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

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./contact.html">Contact</a></p>
     <p> <a href="https://rowurbux.weebly./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 - How do I get a custom right-click context menu to show two links to a page on my site? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)