Web Programlama

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>
Etiketler
Daha Fazla Göster

MeK

Pamukkale Üniversitesi Elektrik Elektronik Mühendisliği ni 2018 yılında bitirdim. 2018 yılında Yüksek Lisansa Karatekin Üniversitesi Elektrik Elektronik Mühendisliğine başladım. Programlamayı seviyorum Delphi, C# , C , PHP dillerine hakimim ARM ile uğraşıyorum bunların yanında web tasarım ve sunucu yönetimi ile hobi olarak uğraşıyorum. Sizlere Kodmek sayfamda hakim olduğum diller ve öğrenmek istediğim konularda yardımcı olmaya çalışacağım

Bir cevap yazın

Başa dön tuşu
Kapalı
Kapalı