Custom Menu With Right Click Using Bootstrap

Facebooktwittergoogle_pluslinkedinmail

We can create beautiful Custom menu on right click with bootstrap panel at ease.

Let us make a div which will be right click enabled.

<div class="col-lg-6 bg-info" id="dv_rc" style="height:400px;" >

Right Click here

</div>

 

To prevent default right click 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 make panel ready for right click

<div id="popupRC" style="display:none;" class="panel panel-primary ">

<div class="panel-heading ">Right Click Window</div>

<div class="panel-body">

 

<div class="col-md-12 ">

<div class="form-group col-md-12">

<label class="col-md-10">Color</label>

<input type="color" class="form-control" id="idcolorr" />

</div>

</div>

</div>

<div class="panel-footer"><input type="button" spTag="btn-close" class="btn btn-danger" value="close" /></div>

</div>

Please note style=”display:none;” so that it is not displayed before right click.

Now we need to display it on right click.

We add line of code to previously added jquery to modifify css  for 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 close this  window on clicking close button of panel.

<input type="button" class="btn btn-danger" value="close" onClick="$('#popupRC').css({ display: 'none' });" />

Right Click Menu

download code right Click sample code

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *