Modal Widget

Standard sintax

    <button type="button" onclick="Modal('myModalId');">Open modal</button>

    <div id="myModalId" class="modal" data-mSize="size in px" data-mClass="myClass">
    <!-- Modal html content -->  
    </div>
  

Il widget Modal ha bisogno di un evento scatentante la sua apertura (può avvenire attraverso un link, un button, o altro evento), attraverso la chiamata alla funzione Modal('myModalId') passandogli come paramentro l'id della modal che si intende aprire e di un div con classe modal che conterrà il codice html da esso contenuto.

È possibile impostare una larghezza in pixel della modal attraverso la proprietà data-mSize, tale larghezza con il css di defautl della libreria al di sotto dei 1024px di grandezza dello schermo sarà portata al 95%, in modo da adattarisi ai dispositivi mobili.

Quando è aperta la modal di default ha la classe modalDialog, per sostituire questa classe con una personalizzata, magari anche per diverse tipologie di modal che si possono avere nel sito web, è possibile usare la proprietà data-mClass, che impoterà la modal con una classe a scelta.

    <button type="button" onclick="Modal('modal-1');">Try modal 1</button>

    <div id="modal-1" class="modal" data-mSize="size in px">
      <h2>MODAL 1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  

È possibile chiamere una modal dall'interno di un'altra modal, inserendo nella prima un evento che invochi la dunzione modalInflater('myModalId') e passandogli come paramentro l'id della modal che si vuole infiltrare in quella già aperta.

    <button type="button" onclick="Modal('modal-1');">Try modal 2</button>

    <div id="modal-1" class="modal" data-mSize="size in px">
      <h2>MODAL 1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
        aliquip ex ea commodo consequat.
      </p>
      <button type="button" onclick="modalInflater('modal-1');">Inflate modal 1</button>
    </div>