Tek bir popup ile hem sign up hemde login' i nasıl çıkartabilirim?
Demke sitediğim Login/Sign Up butonunu tıklayınca default olarak Sign Up çıkacak ama kullanıcı giriş yapmak istiyorsa Hesabım var linkine/butonuna tıklayacak o popup login popup a dönüşecek.
https://codepen.io/tayfunerbilen/pen/wvwRGjz Tayfun abinin tasarımı güzeldi bu tasarım üzerine nasıl yapabilirim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (10)
JQuery ile örnek kod hazırladım. İnceleyebilirsiniz:
<button id="open-sign-popup">Login / Sign Up</button>
<div id="sign-popup" class="my-popup">
<div class="my-popup-backdrop"></div>
<div class="my-popup-window">
<div class="my-popup-tabs">
<div class="my-popup-tab active">Oturum Aç</div>
<div class="my-popup-tab">Kayıt Ol</div>
</div>
<div id="sign-up" class="my-popup-tab-content">
<h1>Oturum Aç</h1>
<p>Buraya oturum açma formu gelecek.</p>
</div>
<div id="sign-in" class="my-popup-tab-content active">
<h1>Kayıt Ol</h1>
<p>Buraya kayıt olma formu gelecek.</p>
</div>
</div>
</div>
.my-popup {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:flex;
flex-direction:column;
z-index:-1;
pointer-events:none;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity ease .3s, z-index .3s linear 0s;
}
.my-popup.active {
z-index:500;
opacity:1;
pointer-events:auto;
}
.my-popup > .my-popup-backdrop {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
background:#00000080;
}
.my-popup > .my-popup-window {
position:relative;
z-index:2;
background:#fff;
display:flex;
flex-direction:column;
border-radius:10px;
box-shadow:0 5px 20px #00000040;
width:500px;
max-width:95%;
transform:scale(0.95);
transition:transform ease .3s;
}
.my-popup.active > .my-popup-window {
transform:scale(1);
}
.my-popup > .my-popup-window > .my-popup-tabs {
display:flex;
flex-directon:row;
width:100%;
}
.my-popup > .my-popup-window > .my-popup-tabs > .my-popup-tab {
flex:1;
display:flex;
align-items:center;
justify-content:center;
padding:25px 15px;
cursor:pointer;
color:#777;
font-weight:bold;
}
.my-popup > .my-popup-window > .my-popup-tabs > .my-popup-tab.active {
color:#000;
}
.my-popup .my-popup-window > .my-popup-tab-content {
display:flex;
visibility:hidden;
height:0;
opacity:0;
pointer-events:none;
}
.my-popup .my-popup-window > .my-popup-tab-content.active {
visibility:visible;
flex-direction:column;
height:auto;
padding:15px;
transition:opacity ease .3s;
opacity:1;
pointer-events:auto;
}
const $signPopup = $("#sign-popup");
// Butona tıklandığında popup'ımıza active class'ı basılsın. Böylece popup açılmış olacka.
$("#open-sign-popup").on("click",function(){ $signPopup.addClass("active"); });
// popup'taki siyah arkaplana tıklanırsa popup kapansın.
$signPopup.on("click", ".my-popup-backdrop", function() {
const $contents = $(this).closest(".my-popup").removeClass("active");
});
// popup'taki sekmelere tıklanınca, sekmeyle aynı sıradaki içerik görüntülensin.
$signPopup.on("click", ".my-popup-tabs > .my-popup-tab", function() {
const $thisTab = $(this);
$thisTab.siblings().removeClass("active");
$thisTab.addClass("active");
// Tıklanan sekmenin kaçıncı sırada olduğunu bul:
const indexOfThisTab = $thisTab.index();
const $contents = $thisTab.closest(".my-popup-window").find(".my-popup-tab-content");
// Tıklanan sekme kaçıncı sıradaysa o sıradaki içeriği aktif et.
$contents.removeClass("active").eq(indexOfThisTab).addClass("active");
});
Burada JQuery ile sadece neye ne zaman active class'ı verileceğini ayarladık. Animasyon işini tamamen CSS'e bıraktık.
pop upta iki durumuda tut
default olarak giriş kısmı acik kalsin
iki durumuda saran div class adı default olarak
signup olsun
.signup .signupicerik display block
.login .loginicerik display block
class yapın
class="popup signup"
tıklandıktan sonra
popup içindeki divleri gizle
tıkladığın butona atadığın dataset değerini yani
ilk açıldığında bu login olacak bu değeri
iki durumu saran dive class olarak ata
