Altın Konu CSS ve JavaScript ile Kalıcı Kutu (Modal) nasıl oluşturulur?

GUNNERIUS · 26 Şub 2024

Merhaba Turkmmo Üyeleri;

"Kalıcı kutu" terimi genellikle bir web sayfasında sabit konumda bulunan ve kullanıcı sayfayı kaydırdığında ekranın herhangi bir yerinde görünen bir kutuyu ifade eder. Bu tür bir kutu oluşturmak için CSS ve JavaScript'i bir arada kullanabiliriz. İşte adım adım nasıl yapılacağına dair bir örnek:

Adım 1: HTML Yapısını OluşturmaÖncelikle, kalıcı kutuyu içerecek bir HTML yapı oluşturmalısınız. Örneğin, aşağıdaki gibi bir <div> elementi kullanabilirsiniz:

[CODE lang="html" title="html"]
<button id="myBtn">Open Modal</button>


<div id="myModal" class="modal">


<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>

</div>[/CODE]

Adım 2: CSS ile Kutuyu Stilize EtmeŞimdi bu kutuyu CSS kullanarak istediğiniz şekilde stilize edebilirsiniz. Örneğin, aşağıdaki gibi bir CSS kodu kullanabilirsiniz:

[CODE lang="css" title="css"]/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and c#fefefe */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, dependin#888 screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight#aaald;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}[/CODE]

Bu CSS kodu, kutunun sabit bir konumda (fixed) olmasını sağlar ve top ve right özellikleriyle bu kutunun ekranın üstünden ve sağ kenarından belirli bir mesafede durmasını sağlar. Ayrıca, kutunun arka plan rengini, kenarlık ve köşelerin yuvarlaklığını belirtir.

Adım 3: JavaScript ile Kutunun Kalıcı Olmasını SağlamaJavaScript'i kullanarak kutunun sayfayı kaydırırken sabit konumda kalmasını sağlayabiliriz. Bu, kullanıcının sayfayı kaydırdığı herhangi bir zaman diliminde kutunun konumunu güncelleyeceğimiz anlamına gelir. İşte bir JavaScript örneği:

[CODE lang="javascript" title="jsx"]// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}[/CODE]

Bu JavaScript kodu, kullanıcının sayfayı kaydırdığı her zaman çalışır. Eğer sayfa yukarıdan 100 piksel kaydırılmışsa, kutuyu görünür hale getirir; aksi halde, kutuyu gizler.

Bu şekilde, CSS ve JavaScript kullanarak bir kalıcı kutu oluşturabilirsiniz. Tabii ki, ihtiyaçlarınıza ve tercihlerinize göre bu kodları değiştirebilirsiniz.