Modale

Le finestre di dialogo modali interrompono la prosecuzione del flusso di lavoro sulla finestra principale dell’applicazione e talvolta richiedono un’azione.
Una modale è usata in maniera appropriata quando viene utilizzata per indirizzare l'attenzione dell'utente verso informazioni importanti o integrative.
Può contenere ogni tipologia di informazione, da un semplice testo informativo a immagini e video.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per le diverse tipologie di modali dell’Ecosistema digitale Turismo Cultura.

Modale generica

                                        
<!-- Modale generica -->                                        
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myModal">
    Apri modale generica
</button>

<div class="dms-modal modal fade" id="myModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale generica</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <i class="dms-wk-icon-info"></i>
                <p><b>Larghezza:</b> max-width: 500px</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>


<!-- Modale con due bottoni -->                                        
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myModalTwoBtns">
    Apri modale con due bottoni
</button>

<div class="dms-modal modal fade" id="myModalTwoBtns" tabindex="-1" role="dialog"
    aria-labelledby="myModalTwoBtnsLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale generica con due bottoni</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <i class="dms-wk-icon-info"></i>
                <p><b>Larghezza:</b> max-width: 500px</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--secondary"
                    data-dismiss="modal">No</button>
                <button type="button" class="btn dms-btn dms-btn--primary">Sì</button>
            </div>
        </div>
    </div>
</div>


<!-- Modale con scroll per lunghi contenuti -->                                        
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myScrollableModal">
    Apri modale con scroll per lunghi contenuti
</button>

<div class="dms-modal modal fade" id="myScrollableModal" tabindex="-1" role="dialog"
    aria-labelledby="myScrollableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale scrollabile per lunghi contenuti</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p><b>Larghezza:</b> max-width: 500px</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
                Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec 
                    ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
                Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec 
                    ullamcorper nulla non metus auctor fringilla.</p>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
                Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
                    Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec 
                    ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--secondary"
                    data-dismiss="modal">Chiudi</button>
                <button type="button" class="btn dms-btn dms-btn--primary">Salva</button>
            </div>
        </div>
    </div>
</div>

Modale di dimensioni opzionali

                                        
<!-- Modale piccola: SM -->
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#mySmallModal">
    Apri modale piccola: SM
</button>

<div class="dms-modal modal fade" id="mySmallModal" tabindex="-1" role="dialog"
    aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale piccola: SM</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p><b>Larghezza:</b> max-width: 300px</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal" aria-label="Close">Chiudi</button>
            </div>
        </div>
    </div>
</div>


<!-- Modale grande -->
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myLargeModal">
    Apri modale grande: LG
</button>

<div class="dms-modal modal fade" id="myLargeModal" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale grande: L</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p><b>Larghezza:</b> max-width: 800px</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal" aria-label="Close">Chiudi</button>
            </div>
        </div>
    </div>
</div>

<!-- Modale grande XL -->
<button type="button" class="btn dms-btn dms-btn--primary mb-2"
    data-toggle="modal" data-target="#myLargeModalXL">Apri modale grande: XL</button>
                                                            
<div class="dms-modal modal fade" id="myLargeModalXL" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalXLLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale grande: XL</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <p><b>Larghezza:</b> max-width: 1140px</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal" aria-label="Close">Chiudi</button>
            </div>

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

<!-- Modale full width -->
<button type="button" class="btn dms-btn dms-btn--primary mb-2"
                    data-toggle="modal" data-target="#myFullWidthModal">
                    Apri modale full-width
                </button>
                
<div class="dms-modal modal fade" id="myFullWidthModal" tabindex="-1" role="dialog"
    aria-labelledby="myFullWidthModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-full-width">
        <div class="modal-content">
            <!-- Modal header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale full width</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <p><b>Larghezza:</b> width: 100%</b></p>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal" aria-label="Close">Chiudi</button>
            </div>
        </div>
    </div>
</div>

Modale per gli avvisi

                                        
<!-- Modale per avviso di successo -->                                        
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#mySuccessModal">
    Apri modale di successo
</button>
<div class="dms-modal modal fade" id="mySuccessModal" tabindex="-1" role="dialog"
aria-labelledby="mySuccessModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Successo</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <i class="dms-wk-icon-success success-clr--txt"></i>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>


<!-- Modale per avviso di attenzione  -->   
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myWarningModal">
    Apri modale di warning
</button>
<div class="dms-modal modal fade" id="myWarningModal" tabindex="-1" role="dialog"
        aria-labelledby="myWarningModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h3 class="modal-title text-center">Attenzione</h3>
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">×</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <i class="dms-wk-icon-warning warning-clr--txt"></i>
                    <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                        Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                        officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                        duis ducimus. Orci tincidunt curabitur!</p>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn dms-btn dms-btn--primary"
                        data-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div>


<!-- Modale per avviso di errore -->   
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myErrorModal">
    Apri modale di errore
</button>
<div class="dms-modal modal fade" id="myErrorModal" tabindex="-1" role="dialog"
    aria-labelledby="myErrorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Errore</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <i class="dms-wk-icon-error error-clr--txt"></i>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

<!-- Modale per avviso informativo -->   
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myInfoModal">
    Apri modale informativa
</button>
<div class="dms-modal modal fade" id="myInfoModal" tabindex="-1" role="dialog"
    aria-labelledby="myInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Info</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <i class="dms-wk-icon-info primary-clr--txt"></i>
                <p>Font Titillium 16px. Leading 24px. omnis iste natus error.
                    Lorem ipsum maecenas nunc! Consectetuer quisquam. Egestas quaerat,
                    officia, ea? Nesciunt fusce! Eos? Eros, convallis delectus imperdiet
                    duis ducimus. Orci tincidunt curabitur!</p>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

Modale con media

                                        
<!-- Modale con immagine -->                                        
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myImageModal">
    Apri modale con immagine
</button>
<div class="dms-modal modal fade" id="myImageModal" tabindex="-1" role="dialog"
aria-labelledby="myImageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale con immagine</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <img src="assets/img/empty-states/intro.svg" alt="Immagine generica" class="img-fluid">
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

<!-- Modale con video -->                                        
<button type="button" class="btn dms-btn dms-btn--primary mb-2" data-toggle="modal" data-target="#myVideoModal">
    Apri modale con video
</button>
<div class="dms-modal modal fade" id="myVideoModal" tabindex="-1" role="dialog"
aria-labelledby="myVideoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h3 class="modal-title text-center">Modale con video</h3>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/do8O06Uu8fI" 
                    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal">Chiudi</button>
            </div>
        </div>
    </div>
</div>

Modale full-width con form

                                            
<button type="button" class="btn dms-btn dms-btn--primary mb-2"
    data-toggle="modal" data-target="#myFullWidthModalForm">Apri modale full width con form</button>
    
<div class="dms-modal modal fade" id="myFullWidthModalForm" tabindex="-1" role="dialog"
    aria-labelledby="myFullWidthModalFormLabel" aria-hidden="true">
    <div class="modal-dialog dialog-full-width">
        <div class="modal-content">
            <!-- Modal header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="container">
                    <h1>Accedi</h1>
                    <div class="row">
                        <div class="col-lg-6 d-flex align-content-center flex-wrap">
                            <div class="dms-alert dms-alert--info d-flex justify-content-between align-items-center"
                                role="alert">
                                <i class="dms-wk-icon-info"></i>
                                Repellendus ullamcorper voluptatum repellat harum cum dui, ipsam
                                lectus nec? Explicabo consequuntur incididunt ipsam, iste
                                aspernatur, rerum dignissim turpis beatae, habitant etiam.
                            </div>
                            <div class="dms-alert dms-alert--warning d-flex justify-content-between align-items-center"
                                role="alert">
                                <i class="dms-wk-icon-warning"></i>
                                Repellendus ullamcorper voluptatum repellat harum cum dui, ipsam
                                lectus nec? Explicabo consequuntur incididunt ipsam, iste
                                aspernatur, rerum dignissim turpis beatae, habitant etiam.
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="dms-login-form gray-clr--bkg">
                                <h2>Primo accesso</h2>
                                <form action="" class="dms-form" role="form">
                                    <div class="form-group">
                                        <label for="inputExample1">Codice di accesso</label>
                                        <input type="text" class="form-control dms-form--input"
                                            id="inputExample1"
                                            placeholder="Inserisci codice di accesso">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputExample1">Ripeti codice di
                                            accesso</label>
                                        <input type="text" class="form-control dms-form--input"
                                            id="inputExample1"
                                            placeholder="Ripeti codice di accesso">
                                    </div>
                                    <button
                                        class="btn dms-btn dms-btn--primary dms-btn--large dms-btn--full-width"
                                        type="button">Conferma</button>
                                        <span>Hai dimenticato il tuo codice di accesso? <a href="#" title="Recupero password">Clicca qui</a></span>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Utilizzo

Ogni modale deve possedere la classe dms-modal. L'attivazione di una modale può avvenire sia lato html, come nello snippet, aggiungendo l'attributo data-toggle="modal" su di un elemento di controllo, ad esempio un bottone, insieme a data-target="#myModal" o href="#myModal", oppure tramite javascript con la singola riga di codice $('#idModale').modal().

E'possibile usare modali di grandezza variabile scegliendo tra le classi modal-xl, modal-lg, modal-sm, modal-full-width

Per motivi di accessibilità, è obbligatorio:

aggiungere l'attributo role="dialog" all'elemento con classe .modal
aggiungere l'attributo aria-labelledby="..." all'elemento con classe .modal con riferimento al titolo della modale stesso
aggiungere l'attributo role="document" applicato al .modal-dialog stesso
aggiungere l'attributo aria-label="Close" al bottone "chiudi", assieme a data-dismiss="modal" per associare l'azione di chiusura della modale

Inoltre, è possibile aggiungere una descrizione della finestra di dialogo modale con aria-describedby su .modal .

Per motivi di usabilità è obbligatorio:

in caso di modali per visualizzare un avviso, aggiungere sempre l'icona di feedback rispettando il colore associato
inserire sempre un bottone per permettere all'utente di uscire dalla modale
in caso di uno o più bottoni, inserire il bottone con azione primaria a destra (vedi bottoni)
in caso di unico bottone, questo deve essere di tipo primario

Le modali sono posizionate al di sopra di ogni altro elemento della pagina e rimuovono lo scroll dal <body> in modo da far scorrere soltanto il contenuto della modale.
Cliccando sulla parte che oscura la pagina, il cosiddetto backdrop della modale, questa verrà chiusa automaticamente.

Puoi approfondire questo pattern sulla pagina Modal di Boostrap.