Modal Popup Nedir?
Bir modal popup veya diyalog kutusu, en son güncellenmiş web sayfasını göstermeye yardımcı olur. Modal popup'un faydası ek bilgiyi göstermek ve sayfayı yeniden yüklememektir. Kullanıcı deneyimi açısından önemlidir çünkü kullanıcıların benzer bir web sayfasında popup kutusunda ilgili bilgileri görüntülemelerini sağlar.
Modallar tetiklenene kadar sessiz kalır ve genellikle kullanıcıyı tek bir çağrıya odaklamak veya kayıt formları ve uyarılar gibi bilgileri vurgulamak için kullanılırlar.
Modal Popupların kullanıldığı birçok yer vardır:
- Sorgulama/iletişim formları
- Potansiyel müşteri oluşturma/kayıt formları
- Giriş/kayıt formları
- Arama formları
- Uyarılar/bildirimler
- Yardım/ipuçları
- Tam ekran görüntü ve videoları gösterme
Popup'larınızı hedefleriniz etrafında oluşturabilirsiniz. Örneğin, Alpma kullanıcıların sitenin her yerinde oturum açmasına izin verir.
Popuplar kötü bir üne sahip olsalar da, doğru kullandığınızda şu konularda fayda sağlayabilirsiniz:
- web sitenizin kullanılabilirliğini artırmak.
- yükleme sürelerini azaltmak.
- tüm tasarımları netleştirmek.
Modal popup'ların neden bu kadar önemli olduğunu öğrendikten sonra, onları nasıl oluşturabileceğinizi öğrenebiliriz.
Bootstrap Modal Popup
Yukarıda okuduğunuz gibi, modal açılır pencereler kullanıcıların başka bir yere geçmeden önce bazı işlemler yapmalarına yardımcı olur. Bazen kullanıcıları uyarmak veya bilgi almak için kullanılabilir.
Bootstrap modal eklentisi, çok kullanışlı ve işlevsel modal açılır pencereler veya diyalog kutuları oluşturmanıza yardımcı olur. Başlık, alt bilgi ve mesaj gövdesi ile kendi modal açılır pencerenizi nasıl oluşturabileceğinizi anlamak için aşağıdaki örneğe göz atabilirsiniz buraya göz atabilirsiniz.
<pre class="tCont active hljs javascript"><div id=<span class="hljs-string">"myModal"</span> <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"modal fade"</span>>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-dialog"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-content"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>></span>×<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title"</span>></span>Confirmation<span class="hljs-tag"></<span class="hljs-name">h4</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span>></span>Do you want to save changes you made to document before closing?<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-warning"</span>></span><span class="hljs-tag"><<span class="hljs-name">small</span>></span>If you don't save, your changes will be lost.<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-default"</span> <span class="hljs-attr">data-dismiss</span>=<span class="hljs-string">"modal"</span>></span>Close<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Save changes<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
<<span class="hljs-regexp">/div></span>
JavaScript aracılığıyla “belge nesne modeli” yüklendiğinde pencere otomatik olarak açılacaktır.
jQuery Modal Popup
jQuery modal dialog kutuları, bilgileri hızlı bir şekilde göstermek için mükemmel bir yoldur. jQuery modal dialog kutularını oluştururken doğru bir şekilde hazırladığınızda, kullanıcılarınızı uyarabilir veya hataları havalı web sitelerinizde gösterebilirsiniz. (modern modal sayesinde!)
Haydi jQuery örneğine bakalım!
<script ></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
Bundan sonra, aşağıdakileri görebilirsiniz:
CSS Modal Popup Penceresi
CSS, HTML öğelerinin ekranda nasıl görüntüleneceğini tanımlayan bir dildir. Bu nedenle, öncelikle HTML'ye bakar, sonra CSS'i inceleriz.
<div class="container">
<div class="interior">
<a class="btn" href="#open-modal"><i class="fas fa-external-link-alt"></i> Basic CSS-Only Modal</a>
</div>
</div>
<div id="open-modal" class="modal-window">
<div>
<a href="#" title="Close" class="modal-close">Close</a>
<h1>Hello!</h1>
<div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
</div>
</div>
Sonrasında, CSS ekleyin!
.modal-window {
position: fixed;
background-color: rgba(255, 255, 255, 0.25);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
&:target {
opacity: 1;
pointer-events: auto;
}
&>div {
width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
background: #ffffff;
color: #333333;
}
header {
font-weight: bold;
}
h1 {
font-size: 150%;
margin: 0 0 15px;
color: #333333;
}
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
&:hover {
color: #000;
}
}
/* Demo Styles */
html,
body {
height: 100%;
}
body {
font: 600 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-color: #f69d75;
color: #555555
}
a {
color: inherit;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.btn {
background-color: #fff;
padding: 1em 1.5em;
border-radius: 3px;
text-decoration: none;
i {
padding-right: 0.3em;
}
}
Bu şekilde görünecektir:
Ne Öneriyoruz? Popupsmart: Basit Bir Popup Oluşturma Hizmeti
Hiç şüphesiz, web sayfanızın istediğiniz yerinde ve amaçla modal popuplar oluşturabilirsiniz. Ancak, modal popuplar oluşturmanın daha işlevsel ve basit bir yolu var.
Akıllı popup oluşturucu Popupsmart her şeyi sizin adınıza yapar. İlk adım olarak, neden bir popup'a ihtiyacınız olduğunu belirlemelisiniz. Bu, satış dönüşümünü artırmak, e-posta listenizi büyütmek, veya telefon çağrılarını artırmak olabilir. Amaçlarınızı belirledikten sonra, sonraki adımlara geçebilirsiniz:
Popupsmart'ın Tasarımı
Seçebileceğiniz birçok hazır şablon var. Eğer kitlenize bir "Duyuru Popup'ı" ile rehberlik etmek istiyorsanız, bu şablonu seçebilirsiniz:
Ya da bir "Ürün Tanıtım Popup'ı" ile satış dönüşümünü artırmak istiyorsanız, popup'ınız bu şekilde tasarlanabilir:
Popupsmart’ın Gösterimi
Ziyaretçinin davranışına göre mesajınızı kısaca özelleştirerek dönüşüm, etkileşim ve satış oranlarını artırabilirsiniz. Ayrıca, Popupsmart kullanıcılarına tüm web sitesi platformlarıyla uyumlu açılır pencereleri 1 dakika içinde kurma imkanı sağlar.
Popupsmart Entegrasyon Sistemi
İş hedefinizi ve uyumlu açılır pencere şablonlarını seçtikten sonra, Popupsmart'ın kullanıcı dostu sistemiyle teknik bir sorun yaşamadan özelleştirip yayınlayabilirsiniz.
Wix açılır pencereleri ve Squarespace açılır pencereleri oluşturmak için Popupsmart'ı kullanabilirsiniz çünkü bu platform builder’ları ile entegre olur.
Umarım bu makale, açılır pencereleri nasıl kolayca oluşturabileceğinize dair size rehberlik eder. HTML, CSS veya JavaScript ile yapmayı deneyebilirsiniz. Ancak, zamanı boşa harcamamak, en göz alıcı açılır pencereleri hazırlamak ve en önemlisi dönüşümlerinizi kontrol etmek için Popupsmart'ı tercih etmelisiniz!
Popupsmart'ın tasarımlarını detaylı bir şekilde incelemek için bu bağlantıya göz atmalısınız:
Açılır Pencere Tasarım Şablonları
Ayrıca, Wordpress’te eklentisiz nasıl açılır pencere oluşturacağınızı biliyor musunuz? Öğrenmek için ilgili makaleye gidin!
İlgili Blog Yazıları
Basit Bir Açılır Pencere ile Blog Yazısı Etkileşimlerinizi Artırın
Web Sitenizin Ziyaretçilerini Rahatsız Etmeden YouTube Görüntülemelerinizi Artırın
Web Siteniz İçin Modal Tailwind CSS Açılır Pencereleri Nasıl Oluşturursunuz?
Zaman ayırdığınız için teşekkürler! 🤗
