v2.5.2
Giriş yap

Tek bir popup ile hem sign up hemde login' i nasıl çıkartabilirim?

bukr3j
473 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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?

Cevap yaz
Cevaplar (10)
bukr3j
668 gün önce

codepen.io dan yap at linkini knk. senin ve benim (yardım edeceğin herkesde dahil) için de kolaylıkolur. sende bende kopyala yapıştır ile uğraşmayız :)

ebykdrms
668 gün önce

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.

bukr3j
668 gün önce

Yanlış dedim düz css :)

bukr3j
668 gün önce

Şiiiiiiiiiiii :)

mubado
668 gün önce

Tamamdır bootstrap vardır onda. Yapabileceğin toggle yapmak

bukr3j
669 gün önce

Düz CSS kullanıyorum.

kartal
671 gün önce

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

mubado
671 gün önce

kullandığın sistem hakkıdna bilgi verisen mesela bootstrap kullanıyorsan toogle ile yapabilirsin.

jct
671 gün önce

@bukr3j ben olsam, Ajax ile hangi butona tıklanırsa, ona göre içerik yükletirim