Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

--- bootstrap_bolweb:altre_componenti:overlay [2021/09/19 16:29]
127.0.0.1 modifica esterna
+++ bootstrap_bolweb:altre_componenti:overlay [2021/10/08 10:46] (versione attuale)
@@ Linea 1: / Linea 1: @@
-====== Overlay ======
+====== 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.
+{{:bootstrap_bolweb:altre_componenti:overlay.png?800|}}
+{{:bootstrap_bolweb:altre_componenti:modale.png?600|}}
+Di seguito un esempio di codice per la costruzione della finestra modale:
+<code>
+<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>
+</code>