Altın Konu CSS ve JavaScript ile açılır pencereler nasıl yapılır?

GUNNERIUS · 2 Mar 2024

Açılır pencereler (popup windows), web geliştirme sürecinde kullanıcılarla etkileşim sağlamak için yaygın olarak kullanılan bir özelliktir. Bu özellik, kullanıcıya belirli bir eylem gerçekleştirme veya ek bilgi görüntüleme imkanı sağlar. CSS ve JavaScript kullanarak açılır pencereler oluşturmanın birkaç farklı yöntemi vardır. İşte bunlardan bazıları:

JavaScript ile Açılır Pencereler:

JavaScript kullanarak açılır pencereler oluşturmak oldukça yaygın bir yöntemdir. window.open() fonksiyonu kullanılarak yeni bir tarayıcı penceresi açılabilir. Örneğin:

[CODE lang="javascript" title="jsx"]function openPopup(url, width, height) {
var left = (screen.width - width) / 2;
var top = (screen.height - height) / 2;
var options = 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left;
window.open(url, 'popup', options);
}[/CODE]

Yukarıdaki JavaScript fonksiyonu, window.open() metodunu kullanarak bir açılır pencere oluşturur. Bu yöntem, kullanıcı tarafından engellenebilir olabilir ve bazı tarayıcılar tarafından engellenir veya pop-up engelleme ayarları tarafından etkilenir.

2. CSS ve JavaScript Kullanarak Modaller Oluşturma:

Ayrıca, CSS ve JavaScript kullanarak modal olarak adlandırılan açılır pencereler de oluşturabilirsiniz. Modaller, web sayfasının üstünde belirgin bir şekilde ortaya çıkan ve kullanıcıyı etkileşime geçmeye zorlayan içerik kutularıdır. CSS ile modali gizleyebilir ve JavaScript ile görüntülenebilir hale getirebilirsiniz. Örnek bir modal:

HTML:

[CODE lang="html" title="html"]<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Modal içeriği buraya gelecek</p>
</div>
</div>[/CODE]

CSS:

[CODE lang="css" title="css"].modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.close {
color: #fefefefloat: right;
font-size: 28px;
font-weight: bold;
}
#888ose:hover,
.close:focus {
color:#aaack;
text-decoration: none;
cursor: pointer;
}[/CODE]

JavaScript:

[CODE lang="javascript" title="jsx"]var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
modal.style.display = "none";
}

window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}[/CODE]

Yukarıdaki kod, bir modal oluşturur ve kapatma işlevselliğini sağlar.

Bu yöntemler, açılır pencereler oluşturmanın iki yaygın yoludur. Hangi yöntemin kullanılacağı, ihtiyaçlarınıza ve tercihlerinize bağlıdır.