mause sağ tık kapama

30 Ocak 2020by MeKWeb

Web Sitesinde Sağ Tıklamayı Devre Dışı Bırakma

JavaScript ve Bootstrap kullanarak bir web sitesinde sağ tıklama olayını nasıl devre dışı bırakacağınızın örnek kodu verilmiştir.

Aşağıda, sayfanızın herhangi bir yerinde sağ tıklama işlemini dinlemek ve yakalamak için kullanılan JavaScript kodu verilmiştir. Bir kullanıcı sağ tıkladığında Bootstrap Modal’ı gösterir ve sağ tıklama fonksiyonunun tetiklenmesini durdurur.

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

Aşağıda örnek bir sayfaya eklenen komut dosyası verilmiştir.

<!doctype html>
<html lang="tr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Örnek Sağ Tık Kapama">
        <meta name="author" content="Projex">

        <title>Örnek Mause Sağ tık kapama - Kodmek</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">×</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>