JavaScript: alert() fonksiyonunu değiştirmek

Bazen projemizi yaparız yaparız ardından alert() dialogu bizim için çirkin gözükür ve onu değiştirmek için bütün projeyi değiştirmek zorunda kalabiliriz. Ama bu anlatımla beraber buna gerek kalmayacak ve var olan alert() fonksiyonunu değiştirebileceğiz. 

Öncelikle HTML ve CSS kullanarak alert yerine geçecek bir pencere tasarlıyorum.

<div id="my-alert">
            <div id="alert-text"></div>
            <div id="alert-close"><button onClick="this.parentNode.parentNode.style.display =  'none'">Kapat!</button></div>
        </div>

alert-close içerisindeki button my-alert id’li div’i gizlemeye yarıyor. Yani kapatıyor. Daha sonra çirkinde olsa buna bir style veriyorum 🙂

       #my-alert {
            position: fixed;
            top: 35%;
            left: 35%;
            width: 250px;
            display: none;
            border: 1px solid black;
            background-color: #ccc;
            padding: 10px;
        }
        #alert-close {
            text-align: right;
        }

Burada oluşturduğumuz elemanı pencereye göre ortaladık ve görünmez (display: none) yaptık. Daha sonra bu pencereyi görüntüleyecek bir fonksiyon hazırlıyoruz.

function showDialog(text) {
    document.getElementById("alert-text").innerHTML = text;
    document.getElementById("my-alert").style.display = "block";
}

Bu fonksiyonun tek yaptığı yazdığımız alert metnini dialog içerisine yazmak ve dialog’u görünür hale getirmek. Ve şimdi alert fonksiyonumuzu değiştiriyoruz;

(function() {
    window.alert = function() {
        return showDialog(arguments[0]);
    };
})();

İşte bu kadar basit. Şimdi bir test sayfasında deneyelim;  

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            (function() {
                window.alert = function() {
                    return showDialog(arguments[0]);
                };
            })();    
            function showDialog(text) {
                document.getElementById("alert-text").innerHTML = text;
                document.getElementById("my-alert").style.display = "block";
            }
       </script>
        <style type="text/css">
            #my-alert {
                position: fixed;
                top: 35%;
                left: 35%;
                width: 250px;
                display: none;
                border: 1px solid black;
                background-color: #ccc;
                padding: 10px;
            }
            #alert-close {
                text-align: right;
            }
        </style>
    </head>
    <body>
        <a href="javascript:alert('Calisiyor');">Tıkla (:</a>
        <div id="my-alert">
            <div id="alert-text"></div>
            <div id="alert-close"><button onClick="this.parentNode.parentNode.style.display =  'none'">Kapat!</button></div>
        </div>
    </body>
</html>
alert javascript

]1 alert javascript

3 thoughts on “JavaScript: alert() fonksiyonunu değiştirmek

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax