Web页面右键菜单(Bootstrap风格)。

演示地址

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>桌面应用右键菜单</title>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
        }

        #menu {
            position: absolute;
            display: none;
        }
    </style>
    <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="col-md-2" id="menu">
    <a href="#" class="list-group-item active">右键菜单</a>
    <a href="#" class="list-group-item" onclick="meanAction(1)">添加应用</a>
    <a href="#" class="list-group-item" onclick="meanAction(2)">刷新</a>
    <a href="#" class="list-group-item" onclick="meanAction(3)">更换背景</a>
    <a href="#" class="list-group-item" onclick="meanAction(4)">上传资料</a>
    <a href="#" class="list-group-item" onclick="meanAction(5)">注销</a>

    <!--		<h2 id="pos"></h2>-->
</div>
<script type="text/javascript">
    //屏蔽浏览器的右键
    document.oncontextmenu = function () {
        return false;
    }
    //点击右键，使菜单显示
    $(document).mousedown(function (e) {
        var key = e.which;//获取键盘的键（右键3，滚轮2，左键1）
        //alert(key);
        if (key == 3) {
            //获取鼠标坐标
            var x = e.clientX;
            var y = e.clientY;
//				$("#pos").html("x="+x+" , y="+y);
            $("#menu").show().css({left: x, top: y});
        }
    });
    //点击空白区域，隐藏右键
    $(document).click(function () {
        $("#menu").hide();
    });
    //菜单功能实现
    function meanAction(flag) {
        alert(flag);
    }
</script>
</body>
</html>