Bootstrap Popup Kullanıcı Girişi Örneği V1


Bir tane giriş butonu var ve ona tıkladığınızda kullanıcı girişi formu popup şeklinde açılıyor, hoş bir şey. Keyif olsun diye Bootstrap ile bir şeyler geliştirmek eğlenceli oluyor, tavsiye ederim şahsen. 🙂

Ekran Görüntüsü

Kodlar
<!--navbar-->
<div class="navbar navbar-inverse navbar-static-top">
   <div class="container">
       <div class="navbar-header">
           <a href="#" class="navbar-brand">Logo</a>
           <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarSec">
               <span class="sr-only">Menü</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
       </div>
       <div class="collapse navbar-collapse navbarSec">
           <ul class="nav navbar-nav navbar-right">
               <li class="active"><a href="#" title="">Anasayfa</a></li>
               <li><a href="#" title="">Hakkımızda</a></li>
               <li><a href="#" title="">Makaleler</a></li>

               <!--dropdown menü-->
               <li class="dropdown">
                   <a href="#" title="" class="dropwdown-toggle" data-toggle="dropdown">
                       Videolar
                       <span class="caret"></span>
                   </a>
                   <ul class="dropdown-menu navbar-inverse acilirMenu">
                       <li><a href="#" title="">A'dan Z'ye PHP</a></li>
                       <li><a href="#" title="">A'dan Z'ye CSS</a></li>
                       <li><a href="#" title="">A'dan Z'ye Jquery</a></li>
                       <li><a href="#" title="">Panel 2014</a></li>
                   </ul>
               </li>
               <!--#dropdown menü-->

               <li><a href="#" title="">İletişim</a></li>
               <!--
               Bu a etiketine tıkladığımız zaman
               kullanıcı girişi formu popup biçiminde açılacak.
               Bu menüye eklendiğinden dolayı menüyü de komple ekledim.
               -->
               <li>
                 <a href="#" 
                    title="" 
                    data-toggle="modal" 
                    data-target="#LoginModal">
                   <span class="glyphicon glyphicon-log-in"></span>
                 </a>
               </li>
           </ul>
       </div>
   </div>
</div>
<!--#navbar-->

<!-- 
Yukarıda popup filan demiştik.
İşte o açılacak olan popup ve kullanıcı formu için
kullanılan kod yapısı burada.
-->

<!-- login-modal -->
<div id="LoginModal"
    class="modal fade col-lg-4 col-md-6
           col-sm-6 col-xs-12 col-lg-offset-4
           col-md-offset-3 col-sm-offset-3"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true"
    style="overflow:auto">

 <div class="modal-dialog" style="width:100%!important">
   <div class="col-md-12 modal-content">
      <form action="" role="form" class="form-horizontal">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Giriş Yap</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <input type="email" class="form-control" id="inputEmail3" placeholder="E-Posta Adresi" />
          </div>
          <div class="form-group">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Şifre" />
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">Giriş Yap</button>
        </div>
      </form>
   </div>
 </div>
</div>
<!-- #login-modal -->
Yararlanılan Kaynaklar

Bunlar da hoşunuza gidebilir...


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir