wiki:ReDesign/modals

Modální okna

K obsluze modálních byl vytvořen modul, skládající se z CSS stylů a JS, který má za úkol nastavit správný atribut style modálnímu oknu, které má být zobrazeno, nebo skryto.

Tlačítko pro otevření modálního okna:

<p class="btn-wrap r"> . 
  <a href="#" class="btn btn-primary btn-border" onclick="document.getElementById('info${request.id}').style.display='block';return false;">
    <span>
      <f:message key="reservation.calendar"/>
    </span>
  </a>
</p> 

HTML kód modálního okna. V hlavičce je nadpis a tlačítko pro zavření okna:

<%-- Modalni okno --%>
<div id="info${request.id}" class="modal">
  <%-- Modalni okno obsah --%>
  <div class="modal-content">
    <div class="modal-header">
        <a href="#" class="close" onclick="this.parentNode.parentNode.parentNode.style.display='none'; return false;">&times;</a>
        <h5>
          Title
        </h5>
      </div>
      <div class="modal-body">
        Html kod                                  
      </div>
    </div>
  </div> 
</div>       

CSS styly jsou načítány Libsass Maven kompilátorem. Umístění stylů je v adresáři sass/plugins/modals/modal.scss.

/* Modal windows */
@import './plugins/modals/modal';
{{{

}}}
Last modified 18 months ago Last modified on 04/21/19 09:33:56