Skip to main content
BootstrapCSSHTMLJavascript

Disable Right Click on Website

By February 16, 2018No Comments

This is an example of how to disable right clicking on a website using JavaScript and Bootstrap.

You could leave Bootstrap off completely and use the basic alert functionality, but it’s not as clean looking to the end user and limits some of the customization.

The following is the JavaScript code used to listen and catch the right click action anywhere on your page.  When a user right clicks it shows the Bootstrap Modal and stops the right click function from firing.

<script>
    $(document).on('contextmenu', function() {
        $('#exampleModal').modal('show');
        return false;
    });
</script>

Below is the script inserted on an example page.  You can view the demo of it in action here.

<!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 a website using Javascript and a Bootstrap Modal">
        <meta name="author" content="Projex">

        <title>Bootstrap and Javascript Right Click Disable Example | Prodjex Web Development and Consulting</title>

        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/signin.css" rel="stylesheet">

        <style>
            body{background-color: grey;}
            p{color: #fff;}
        </style>
    </head>

    <body class="text-center">

        <div class="container">
            <div class="col-md-12">
                <img src="https://forums.prodjex.com/uploads/monthly_2017_12/5a49485fa77dd_logobig.png.0c19c7fc9cc393df1ad69f5ec30877c1.png"><br><br>
                <p>Right click on this page...</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>
            $(document).on('contextmenu', function () {
                $('#exampleModal').modal('show');
                return false;
            });
        </script>

    </body>
</html>

Keep in mind just because you disable the right click functionality on your website doesn’t mean your content is safe.  There are many other methods someone with the right knowledge could use to download media assets or copy text from your website.  If you don’t want your assets copied or downloaded then don’t put it on the internet to begin with.

View the Prodjex Web Development forum discussion on How to disable right click on a website using JavaScript and a Bootstrap Modal.

Tags:

Leave a Reply