admin管理员组

文章数量:1310108

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

  • javascript
  • html
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 willwill 711 gold badge3 silver badges8 bronze badges 6
  • 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

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 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741854227a2401244.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。