Modale

Solitamente si utilizza per dare rilevanza al messaggio che si sta inoltrando all'utente, una velatura nera ricopre tutta la pagina ed il messaggio è contenuto all'interno di un riquadro bianco. Ci sono tre tipi di modali: la modale del footer con barra di scorrimento verticale per contenuti lunghi, la modale comune e la modale con bottoni di risposta. Un'icona di chiusura a forma di 'x' è sempre posta nell'angolo alto di destra.

Di seguito un esempio di codice per la costruzione della finestra modale:

<div class="modal fade card-popup-modal show" tabindex="-1" role="dialog" id="modalPopup" style="padding-right: 17px; display: block;" aria-modal="true">
	  	<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
	     	<div class="modal-content pt-3">
	     	    <div class="modal-header mx-3">
	         		<button class="close shadow" type="button" data-dismiss="modal" aria-label="Chiudi">
	            		<svg class="icon">
	              			<use xlink:href="/procedimenti/new/static/svg/sprite.svg#it-close"></use>
	            		</svg>
	          		</button>
	        	</div>
	         	<div class="modal-body text-center">
	         		
	
   	<h5 class="font-weight-semibold">Per aderire al bando devi effettuare l'accesso</h5>
    <div class="cta pt-3">
    	<button class="btn btn-outline-secondary mb-3" data-dismiss="modal" type="button">Annulla</button>
        <a href="/procedimenti/new/bandi/private" class="btn btn-bandi-green mb-3 change-profile btn-login" data-goto-url="/procedimenti/new/bandi/bandi/sport-turismo/impianti-sportivi/test-createnotification-RLAC2021002722" data-click-fai-domanda="true">Accedi</a>
    </div>

    <div>
	<p class="text-center"><small>Non hai un'utenza? <a href="/procedimenti/new/bandi/private" title="Registrati">Registrati</a></small></p>
</div>

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