POP-UP Giriş Ekranı

• Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
• İnsagram gönderisine ulaşmak için buraya tıklayın.
• Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
• Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

HTML KODLARI

  <button class="giris-buton" onclick="openForm()">Giriş Yap</button>

  <div class="form-popup" id="girisForm">
    <form action="" class="form-icerik">
      <h2>Giriş Yap</h2>

      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Mail Girin" name="email" required>

      <label for="psw"><b>Şifre</b></label>
      <input type="password" placeholder="Şifre Girin" name="psw" required>


      <button type="button" class="btn cıkıs" onclick="closeForm()">Vazgeç</button>
      <button type="submit" class="btn">Giriş</button>
    </form>
</div>

CSS KODLARI

 body {
      font-family: Arial, Helvetica, sans-serif;
    }


    * {
      box-sizing: border-box;
    }

    h2 {
      text-align: center;
      margin: 20px;
      padding: 0;
    }

    .giris-buton {
      background-color: #212529;
      color: white;
      padding: 16px 25px;
      border: none;
      cursor: pointer;
      opacity: 0.8;
      width: 170px;
      border-radius: 35px;
    }


    .form-popup {
      display: none;
      position: fixed;
      top: 7px;
      left: 8px;
      border: 3px solid #f1f1f1;
      z-index: 9;
    }


    .form-icerik {
      max-width: 300px;
      padding: 10px;
      background-color: white;
    }


    .form-icerik input[type=text],
    .form-icerik input[type=password] {
      width: 80%;
      padding: 15px;
      margin: 5px 0 22px 0;
      border: none;
      background: #f1f1f1;
      border-radius: 27px;
    }


    .form-icerik input[type=text]:focus,
    .form-icerik input[type=password]:focus {
      background-color: #ddd;
      outline: none;
    }


    .form-icerik .btn {
      background-color: #04AA6D;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      width: 45%;
      margin-bottom: 10px;
      opacity: 0.8;
      float: left;
      border-radius: 62px;
      margin-right: 14px;
    }

    .form-icerik .cıkıs {
      background-color: red;
    }

    .form-icerik .btn:hover,
    .open-button:hover {
      opacity: 1;
    }

JAVASCRİPT KODLARI

  <script>
    function openForm() {
      document.getElementById("girisForm").style.display = "block";
    }

    function closeForm() {
      document.getElementById("girisForm").style.display = "none";
    }
  </script>