Jump to content
Nathan

Disable Right Click on Specific Area of a Website

Recommended Posts

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"/></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">&times;</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>

You can check out the demo here.

View the Prodjex Web Development Blog post on How to Disable Right Click on Specific Area of a Website.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...