Introduction
We can create a beautiful custom menu on right click with bootstrap panel at ease.
Let us make a div
which will be right click enabled for custom menu.
<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >
Right Click here
</div>
To prevent default right click menu, we need to add the following code within head
tag:
$(document).ready(function () {
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault();
});
});
Now, we need to make a panel ready for right click 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>
Please note style="display:none;"
. The reason behind this is not to display before right click.
Now we need to display it on right click.
We add a line of code to the previously added jquery to modify CSS to display and position right below click.
$("#dv_rc").bind('contextmenu', function (e) {
e.preventDefault();
$("#popupRC").css({ position: "absolute", top: e.pageY,
left: e.pageX, display: "block" });
});
Now add some code to close this window on clicking 'close
' button of panel.
<input type="button" class="btn btn-danger"
value="close" onClick="$('#popupRC').css({ display: 'none' });" />
Points of Interest
Easy way to make a right click menu using bootstrap and jquery: