Jump to content

How to disable right click on a website using JavaScript and a Bootstrap Modal


Recommended Posts

  • Administrators

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.

  $(document).on('contextmenu', function () {
  	return false;

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

<!doctype html>
<html lang="en">
        <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">

            body{background-color: grey;}
            p{color: #fff;}

    <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 class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
            <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>
                    <div class="modal-body">
                        Don't do that!
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">I Understand</button>
        <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>

            $(document).on('contextmenu', function () {
                return false;


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 Blog post on How to disable right click on a website using JavaScript and a Bootstrap Modal.

Link to comment
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.

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...