rails modalbox

Proje geliştirme aşamasında çogu zaman  kullanıcıya uyarı vermek için yada ek bir sayfa açmak yerine sayfa üzerinde açılabilen bir ekrandan  üzerinden kullanıcıdan veri almak için modal box kullanırız. Zaman geçtikçe  her kullanım için modal boxla karşılaşir oldum. İleride bir gun lazım olabilme ihtimaline göre buraya not almkata fayda var.

Modal box boyutunu  modal sınıfı ile belirtiyoruz. Orta boyut için modal-md, küçük boyut için modal-sm  , büyük boyut için modal-lg


1. Standart ModalBox


<a href="#" data-toggle="modal" data-target=".modal-uyarı"><i class="fa fa fa-user-md " aria-hidden="true"></i></span></a>

         <div class="modal fade modal-uyarı" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-md">
              <div class="modal-content">
                 <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                      <h4 class="modal-title" id="myModalLabel">Dikkat</h4>
                   </div>
               <div class="modal-body">
                <p> Modal Box Uyarısı</p>
               </div>
             </div>
           </div>
          </div>
          </div>

2. Modal içinde form oluşturma

<a href="#" data-toggle="modal" data-target=".modal-from"><i class="fa fa fa-user-md " aria-hidden="true"></i></span></a>

         <div class="modal fade modal-from" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-md">
              <div class="modal-content">
                 <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                      <h4 class="modal-title" id="myModalLabel">User Adını Giriniz:</h4>
                   </div>
               <div class="modal-body">
                
             <%= simple_form_for(user, url: admin_user_path(user) ,validate: true, html: { multipart: true }) do |f| %>
                <div  class="row form-group">
                  <label class=" col-md-5 col-sm-5 col-xs-5">Ad:</label>
                      <div  class="col-md-5 col-sm-5 col-xs-5" >
                       <%=f.input :title, required: true, label: false, input_html: {class: "form-control"}%>
                         </div>
                       </div>
                    <div class="actions">
                 <%= f.submit "Yükle", :class => "btn btn-primary submit"%>
              </div>
          <% end %>

               </div>
             </div>
           </div>
          </div>
       </div>

3. Modal içinden view Çağırma:



<a href="#" data-toggle="modal" data-target=".modal-call-view"><i class="fa fa fa-user-md " aria-hidden="true"></i></span></a>

         <div class="modal fade .modal-call-view" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-md">
              <div class="modal-content">
                 <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                      <h4 class="modal-title" id="myModalLabel">Sayfa Getir</h4>
                   </div>
               <div class="modal-body">
                      <%=render "modal" %>
               </div>
             </div>
           </div>
          </div>
          </div>

      view/user/_modal.html.erb

       <p> Modal box içerisinden view çağtıldı</p>




4. Modal içinden form-view Çağırma:

Eğer Modal box içerisinden bir sayfa çağırıp parametre göndermek istiyorsak şağıdaki şekilde yazarız , örneğin bir from sayfası olabilir


<a href="#" data-toggle="modal" data-target=".modal-call-form"><i class="fa fa fa-user-md " aria-hidden="true"></i></span></a>

         <div class="modal fade .modal-call-form" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-md">
              <div class="modal-content">
                 <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                      <h4 class="modal-title" id="myModalLabel">Form Sayfası Getir</h4>
                   </div>
               <div class="modal-body">
                      <%=render "modal"  user: @user  %>
               </div>
             </div>
           </div>
          </div>
          </div>

   Not:Gönderilecek parametreler birden fazla ise , ile yanına devam edilir.
   <%=render "modal"  user: @user, lesson: @lesson  %>

      view/user/_modal.html.erb

       <p> Kullanıcı: <%=user.full_name%></p>
       <p> Dersi: <%=lesson.name%></p>



4. Sıralı Modal :

Eğer bir index sayfasında listelediğiniz veriler varsa ve herbir veriye ait bir iconunuz vaesa, bu icona tıklandığında modal boxın açılmasını istiyorsanız , işler biraz karışabilir . Çunkü modalboxa verdiğiniz id örneğin bir ustteki örnekte "modal-call-form" her bir satır için oluşacağı için birine tıkladığınızda tum satır kadar modal box açılır. Bu Modal boxi her bir satırdaki değer ile eşitlemek gerekir.


<a href="#" data-toggle="modal" data-target=".modal-call-form<%=user.id%>"><i class="fa fa fa-user-md " aria-hidden="true"></i></span></a>

         <div class="modal fade .modal-call-form<%=user.id%>" tabindex="-1" role="dialog" aria-hidden="true">
           <div class="modal-dialog modal-md">
              <div class="modal-content">
                 <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                      <h4 class="modal-title" id="myModalLabel">Form Sayfası Getir</h4>
                   </div>
               <div class="modal-body">
                      <%=render "modal"  user: user  %>
               </div>
             </div>
           </div>
          </div>
          </div>

      view/user/_modal.html.erb

       <p> Kullanıcı: <%=user.full_name%></p>

Kullanıcıları listelediğimizi varsayarsak her kullanıcıya ait olan modal box açılmış olur.