2 dk, tahmini okuma süresi
Modallara Giris
En Son Güncelleme: 13 Temmuz, 2022Yeni başlayan biriyseniz, bir modal oluşturmak göz korkutucu görünebilir. Bir modal, HTML, CSS ve tabii ki JavaScript içerir. Ön uç (Front-end) web geliştirmenin tüm yönleriyle çalışmanız gerekiyor. Bir modal kullanmaktan tabi ki kaçınabilirsiniz ama ne zmana kadar erteleceksiniz. Modallar, ziyaretçilerimize bazı bilgileri göstermek, basit ve hızlı bir form göndermek veya onları herhangi bir şey hakkında uyarmak vb. için mükemmel. Tek sınır sizin hayal gücünüz. Hadi başlayalım!
§Temel Bir Tanımla Başlayalım
A modal is a an element that appears in front of of the main content you have on your page. It requires user interaction and engagement. It's a good way to show the user what you want them to see and get their attentions.
Modal, sayfanızdaki ana içeriğin üzerinde görünen bir öğedir. Modalı kapatmak kullanıcı etkileşimi gerektirir. Kullanıcıya ne görmesini istediğinizi göstermenin ve dikkatlerini çekmenin çok iyi bir yolu diyebiliriz.
§Modalların Kullanımları
Her şeyden önce, modallar çoğunlukla web geliştiricileri olarak önemli olduğunu düşündüğümüz ve kullanıcıların dikkatini hak ettiğini düşündüğümüz şeyler hakkında kullanıcıları bilgilendirmek için kullanılır. Modalın kapatılması kullanıcı ile etkileşim gerektirir. Bu etkileşim, mümkün olan en fazla dikkati sağlar. Ayrıca kullanıcıları, yapmak üzere oldukları bir şey hakkında da bu şekilde uyarabilirsiniz.
Bir modalda form oluşturmak mümkündür ve hatta doğru yapılırsa, eğlencelidir. Kullanıcıların aynı sayfada kalmasına ve ziyaretçinin görüntülediği sayfayı değiştirmeden bir form gönderme işlemi yapmasına olanak tanır. Oturum açma, kaydolma vb. işlemleri bu şekilde gerçekleştirebilirsiniz.
You can display media to your visitor in form of a modal if you think the media deserves attention. It's an awesome way to get maximum attention of your visitor. Imagine a long, boring text. If you were to divide this long text with some information in form of media that allowed the visitors to digest the content in another way, you can be sure that you will have happier visitors that spend more time on your websites.
Bir medya öğesinin ilgiyi hak ettiğini düşünüyorsanız, medyayı ziyaretçinize modal şeklinde gösterebilirsiniz. Ziyaretçinizin maksimum dikkatini çekmenin harika bir yolu.
Uzun, sıkıcı bir metin hayal edin. Bu uzun metni, ziyaretçilerin içeriği başka bir şekilde sindirmelerini sağlayan medya biçiminde bazı bilgilerle bölerseniz, web sitelerinizde daha fazla zaman harcayan daha mutlu ziyaretçileriniz olacağından emin olabilirsiniz.
§Bir Modal Nasıl Çalışır
Modal, ana içeriğin üzerinde belirir, onu bloklar ve ana içerikle etkileşime izin vermez. Modalları kapatmak, kullanıcı eylemi gerektirir. Modal dışındaki içeriğin daha az önemli olduğu hissini vermek için genellikle modallar arka planı koyulaştırır. Bu, kullanıcıların dikkatini modalın üzerine toplar. Kişisel olarak ziyaretçileri / kullanıcıları bilgilendirmek ve bazı medyaları paylaşmak için modları kullanıyorum. Çok karmaşık olabileceğinden, oturum açma ve kayıt olma gibi süreçlerin kendi sayfalarını hak ettiğini düşünüyorum.
Modalların çok farklı ve yaratıcı şekillerde kullanıldığını gördüm ve aşağıdaki örneklerden sonra biraz düşünürseniz, projelerinizde modalları kullanmanın çeşitli yollarını bulabileceğinize eminim.
§İki Basit Modal Oluşturalım
İki çok basit modal oluşturacağız. Bu örneklerle modal işleyişini daha iyi anlayacağınıza eminim. Hadi başlayalım!
Örneklerimde, modallar için div'lerim HTML dosyamda zaten var. Ana içeriğin arkasında ve görünmezler. Ayrıca onları görünür kılmak için sayfama iki tane de buton ekledim.
Bizim css'imiz de çok basit. Modallaraımız "position: absolute" değerine sahip olacak çünkü tüm sayfayı kaplamalarını istiyoruz. Her modal için iki ana div oluşturacağız. Bu div'lerden biri tüm sayfayı kaplayacak, diğeri ise ortada olacak ve içinde ana içeriğimizi barındıracak.
JavaScript dosyamızda modallar için gerekli değişiklikleri yapmamız yeterli. Modalların css değerlerini görünür/görünmez hale getirmek için değiştireceğiz.
Karmaşık olduğunu düşündüğümde yorum ekleyeceğim. index.html dosyasının koduyla başlayalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Modal</title>
</head>
<body>
<div id="modal-container-one" class="modal">
<div class="modal-text-box">
<p>This is modal one, very basic, very simple.</p>
<button id="modal-one-close-button" class="close-button">Close</button>
</div>
</div>
<div id="modal-container-two" class="modal">
<div class="modal-text-box">
<p>This is modal two. There is a little action going on with the width, nothing too complicated. </p>
<button id="modal-two-close-button" class="close-button">Close</button>
</div>
</div>
<div class="button-container">
<button id="button-one" class="modal-open-button">Open Modal One</button>
<button id="button-two" class="modal-open-button">Open Modal Two</button>
</div>
</body>
</html>
Şimdiye kadar pek de karmaşık bir şey yok. Şimdi style.css dosyamızın kodunu görelim:
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
background: rgb(87,255,244);
background: linear-gradient(153deg, rgba(87,255,244,1) 0%, rgba(103,255,199,1) 63%);
align-items: center;
justify-content: center;
}
.modal {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
align-items: center;
justify-content: center;
transition: 0.4s;
display: flex;
}
#modal-container-one {
z-index: -1;
opacity: 0;
}
#modal-container-two {
z-index: -1;
opacity: 0;
width: 0px;
}
.modal-text-box {
padding: 50px;
background: rgb(253,90,255);
background: radial-gradient(circle, rgba(253,90,255,1) 0%, rgba(45,249,253,1) 100%);
font-size: 1.4rem;
color: white;
height: 200px;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.close-button {
background-color: red;
border: none;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
color: white;
font-size: 1.4rem;
transition: 0.3s;
}
.close-button:hover {
cursor: pointer;
box-shadow: 0px 0px 12px 2px red;
}
.button-container {
display: flex;
flex-direction: column;
}
.modal-open-button {
padding: 15px 20px;
margin: 10px 0;
border: none;
background-color: violet;
font-size: 1.4rem;
border-radius: 5px;
color: white;
box-shadow: 2px 2px 12px 2px rgb(255, 255, 255);
transition: 0.3s;
}
.modal-open-button:hover {
cursor: pointer;
background-color: rgb(241, 172, 241);
color: rgb(0, 0, 0);
box-shadow: 2px 2px 12px 2px rgb(0, 0, 0);
}
Bu projeyi çok kısa tutmak için süslü bir şey kullanmamaya çalıştım.
// Elementlerimizi seçerek başlayalım
// Modallarımız açmak için butonlar
const modalBtnOne = document.querySelector("#button-one")
const modalBtnTwo = document.querySelector("#button-two")
// Modellerimizin dış div'leri
const modalOne = document.querySelector("#modal-container-one")
const modalTwo = document.querySelector("#modal-container-two")
// Ve son olarak kapatma düğmeleri
const modalOneCloseButton = document.querySelector("#modal-one-close-button");
const modalTwoCloseButton = document.querySelector("#modal-two-close-button");
let modalOpen = false // Aktif (açık) bir modal olup olmadığını kontrol et
window.addEventListener('click', (event) => {
// Açık bir modal varsa
if(modalOpen) {
// 2 modal da aşağı yukarı aynı, modal 2
// büyüme / küçülme animasyonu var ama onun dışında
// karmaşık hiçbir şey yok
if(event.target === modalOneCloseButton) {
modalOpen = false
modalOne.style.zIndex = "-1";
modalOne.style.opacity = "0";
} else if(event.target === modalTwoCloseButton) {
modalOpen = false
modalTwo.style.zIndex = "-1";
modalTwo.style.opacity = "0";
modalTwo.style.width = "0px"
}
} else if(event.target === modalBtnOne) {
// z-endeksi değeri 4 kadar küçük olabilirdi ama
// gerçekten önemli olmadığında 100 yapmayı seviyorum
modalOpen = true;
modalOne.style.zIndex = "100";
modalOne.style.opacity = "1";
}
else if(event.target === modalBtnTwo) {
modalOpen = true;
modalTwo.style.zIndex = "100"
modalTwo.style.opacity = "1"
// görüntülemek için tam boyuta büyütün
modalTwo.style.width = "100%"
}
})
İşimiz bitti. Tebrikler, modallar oluşturması en kolay öğeler değildir ve umarım modalların işleyişi ve kullanımları hakkında daha iyi bir fikir sahibisinizdir şimdi. Umarım bu gönderiyi okurken eğlenmişsinizdir, ben kesinlikle oluştururken eğlendim.
Burada durmayın, daha ayrıntılı modallar yapın, mevcut projelerinize dahil edin, modallarınız için yeni projeler yapın, vb. Öğrenmeye devam edin!
Ilker Akbiyikİçindekiler
Benzer Paylaşımlar
