Last week we wrote a blog post on how to disable right click functionality on an entire website. Since then we’ve had a few requests on how you would apply this same method to a certain area, container or element on your website or webpage.
The code is almost identical, you just have to modify the listener so that it only fires based on certain CSS selectors.
Here’s the entire page’s code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Example of how to disable right click on specific sections of a website using Javascript and a Bootstrap Modal"> <meta name="author" content="Projex"> <title>Bootstrap and Javascript Right Click Disable Element Based Example | Prodjex Web Development and Consulting</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/pricing.css" rel="stylesheet"> <style> body{background-color: grey;} p{color: #fff;} </style> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow"> <h5 class="my-0 mr-md-auto font-weight-normal"><img src="https://www.prodjex.com/wp-content/uploads/2017/10/dsmall.png.webp"/></h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="#">Features</a> <a class="p-2 text-dark" href="#">Enterprise</a> <a class="p-2 text-dark" href="#">Support</a> <a class="p-2 text-dark" href="#">Pricing</a> </nav> <a class="btn btn-outline-primary" href="#">Sign up</a> </div> <div id="disableRC" class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <div class="col-md-12"> <h1 class="display-4">Right click here...</h1> <p class="lead">Example of how to disable right click on specific sections of a website using Javascript and a Bootstrap Modal.</p> </div> </div> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Warning</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Don't do that! </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">I Understand</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $('#disableRC').on('contextmenu', function () { $('#exampleModal').modal('show'); return false; }); </script> </body> </html>
The code we’ve changed is within the JavaScript, instead of looking at the entire document, we’re now only looking at firing the event if the right click happens within the “disableRC” element.
<script> $('#disableRC').on('contextmenu', function () { $('#exampleModal').modal('show'); return false; }); </script>