Custom Menu With Right Click Using Bootstrap

• Download source code (ZIP) - 834 B
• Download source code (RAR) - 813 B

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(); // prevents default menu 
});
});

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(); // prevents native menu from being shown
 $("#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: