Question

110

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

rated 0 times [ 114] [ 4] / answers: 1 / hits: 8690 / 6 Years ago, tue, march 13, 2018, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ayleen

Add To Favorites

Follow

Total Points: 447

Total Questions: 88

Total Answers: 109

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

answered 6 Years ago natalyah · Accepted Answer

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