<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.context-menu {
position: absolute;
text-align: center;
background: lightgray;
border: 1px solid black;
}
.context-menu ul {
padding: 0px;
margin: 0px;
min-width: 150px;
list-style: none;
}
.context-menu ul li {
padding-bottom: 7px;
padding-top: 7px;
border: 1px solid black;
}
.context-menu ul li a {
text-decoration: none;
color: black;
}
.context-menu ul li:hover {
background: darkgray;
}
</style>
</head>
<body>
right click in the run-code
<div id="contextMenu" class="context-menu"
style="display:none">
<ul>
<li><element onclick="report()">Report Feedback</element></li>
<li><element onclick>Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
<li><element >Element</element></li>
</ul>
</div>
<script>
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu").style.display = "none"
}
function rightClick(e) {
e.preventDefault();
if (document.getElementById("contextMenu").style.display == "block")
hideMenu();
else {
var menu = document
.getElementById("contextMenu")
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}
}
function report() {
let report = prompt("send feedback");
alert("your request was sent.")
}
</script>
</body>
</html>
<!-- end snippet -->