Il Web Toolkit mette a disposizione il componente Dialog per la visualizzazione di finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Apri

Il codice di riferimento della dialog è il seguente:

<button class="Button Button--default js-fr-dialogmodal-open" aria-controls="modal">
  Apri
</button>

<div class="Dialog js-fr-dialogmodal" id="modal">
    <div class="
      Dialog-content
      Dialog-content--centered
      u-background-white
      u-layout-prose
      u-margin-all-xl
      u-padding-all-xl
      js-fr-dialogmodal-modal
    " aria-labelledby="modal-title">
        <div role="document" class="Prose">
            <h2 class="u-cf u-text-h2 u-borderHideFocus" id="modal-title" tabindex="0">Sit et cum iure illum ducimus dignissimos fuga iste.</h2>
            <p>
                Quod voluptatibus sapiente dolorem omnis possimus odit quod consequatur. Delectus ex et corporis. Sed minima ea. Et maiores pariatur illum voluptatem est nam fugit non blanditiis. Esse eaque veritatis et eaque autem et dolorem fugit nobis. Incidunt error
                vel culpa sed assumenda unde. Incidunt et minima tempore omnis sequi iure et sed enim. Laboriosam et in et veniam placeat aliquid quos quasi ut. Qui molestiae ea quibusdam. Sunt ut nobis aut quam asperiores incidunt voluptatem omnis saepe.
                Et nam commodi minima. Iste esse dolores distinctio.
            </p>
            <button class="Button Button--danger js-fr-dialogmodal-close u-floatRight">Chiudi</button>
        </div>
    </div>
</div>

Utilizzando la nuova barra degli strumenti, specifica per TinyMCE, l'inserimento risulta particolarmente semplificato

Configurazione 

Il pulsante Dialog può essere attivato direttamente dal plugin Editor - TinyMCE, previa installazione del plugin System - TinyMCE for ItaliaPA Template, attivando il plugin personalizzato ipa e selezionando il pulsante personalizzato ipa-dialog.

Requisiti

Plugin System - TinyMCE for ItaliaPA 3.8.0.10 o successivo