我們可以輕松地通過右鍵單擊建立一個漂亮的自定義菜單。
讓我們建立一個div右鍵單擊啟用自定義菜單。
<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >
Right Click here
</div>
要防止預設右鍵單擊菜單，我們需要在head标記中添加以下代碼：
$(document).ready(function () {
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents default menu
});
});
現在，我們需要為右鍵菜單制作一個面闆：
<div id="popupRC" style="display:none;"
class="panel panel-primary ">
<div class="panel-heading ">Right Click Window</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-md-2">Color</label>
<input type="color"
class="form-control" id="idcolorr" />
</div>
</div>
<div class="panel-footer"><input type="button"
class="btn btn-danger" value="close" /></div>
</div>
請注意style="display:none;"。這背後的原因是在右鍵單擊之前不顯示。
現在我們需要在右鍵單擊顯示它。
我們在之前添加的jquery中添加了一行代碼，以修改CSS，使其顯示并定位在單擊的右下方。
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents native menu from being shown
$("#popupRC").css({ position: "absolute", top: e.pageY,
left: e.pageX, display: "block" });
});
現在添加一些代碼，點選close面闆按鈕關閉此視窗。
<input type="button" class="btn btn-danger"
value="close" onClick="$('#popupRC').css({ display: 'none' });" />
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>自定義右擊菜單</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault(); // prevents default menu
$("#popupRC").css({ position: "absolute", top: e.pageY, left: e.pageX, display: "block" });
});
});
</script>
<meta charset="utf-8" />
</head>
<body>
<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >
<h3>Right Click here </h3>
</div>
<div class="col-lg-6 bg-primary" style="height:400px;" >
</div>
<div id="popupRC" style="display:none;" class="panel panel-primary ">
<div class="panel-heading ">Right Click Window</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label col-md-2">Color</label>
<input type="color" class="form-control" id="idcolorr" />
</div>
</div>
<div class="panel-footer"><input type="button" class="btn btn-danger" value="close" onClick="$('#popupRC').css({ display: 'none' });" /></div>
</div>
</body>
</html>
原文位址：https://www.codeproject.com/Tips/1172961/Custom-Menu-With-Right-Click-Using-Bootstrap
![【web素材】01-10款大氣的購物商城網站模闆[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)