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>
]1 alert javascript
dostum bu kodu sayfa yüklenirken nasıl yapıcaz?
sayfa yüklenirken derken ?
function Yuklendi()
{
alert(‘SAYFA YÜKLENDİ ! (MESAJ)’);
}
window.onload = Yuklendi;
Buyur dostum.