Modal · Italia daisy

Tre modi di aprirla

Stesso markup del corpo, tre inneschi diversi.

Con :target Con checkbox

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-1"><span>Con &lt;dialog&gt; e command</span></button>
<dialog id="modal-1" class="modal ita-modal" aria-labelledby="modal-1-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-1" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-1-title" class="ita-modal-title">Aperta con command</h2>
      <div class="ita-modal-body">Testo che descrive lo scopo della modale e quali sono le azioni richieste all'utente.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-1"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-1"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <a href="#modal-2" class="ita-btn ita-btn-primary"><span>Con :target</span></a>
<div id="modal-2" class="modal ita-modal" role="dialog" aria-labelledby="modal-2-title">
    <div class="modal-box">
      <a href="#" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></a>
      <h2 id="modal-2-title" class="ita-modal-title">Aperta con :target</h2>
      <div class="ita-modal-body">Testo che descrive lo scopo della modale e quali sono le azioni richieste all'utente.</div>
      <div class="modal-action"><a href="#" class="ita-btn ita-btn-primary ita-btn-outline"><span>Annulla</span></a><a href="#" class="ita-btn ita-btn-primary"><span>Conferma</span></a></div>
    </div>
    <a href="#" class="modal-backdrop" aria-label="Chiudi finestra modale"></a>
</div>
  <label for="modal-3" class="ita-btn ita-btn-primary"><span>Con checkbox</span></label>
<input type="checkbox" id="modal-3" class="modal-toggle" aria-label="Con checkbox">
<div class="modal ita-modal" role="dialog" aria-labelledby="modal-3-title">
    <div class="modal-box">
      <label for="modal-3" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></label>
      <h2 id="modal-3-title" class="ita-modal-title">Aperta con checkbox</h2>
      <div class="ita-modal-body">Testo che descrive lo scopo della modale e quali sono le azioni richieste all'utente.</div>
      <div class="modal-action"><label for="modal-3" class="ita-btn ita-btn-primary ita-btn-outline"><span>Annulla</span></label><label for="modal-3" class="ita-btn ita-btn-primary"><span>Conferma</span></label></div>
    </div>
    <label for="modal-3" class="modal-backdrop" aria-label="Chiudi finestra modale"></label>
</div>
</div>

Con e senza pulsante di chiusura

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-4"><span>Lancia la demo della modale</span></button>
<dialog id="modal-4" class="modal ita-modal" aria-labelledby="modal-4-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-4" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-4-title" class="ita-modal-title">Titolo modale</h2>
      <div class="ita-modal-body">Testo che descrive lo scopo della modale e quali sono le azioni richieste all'utente.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-4"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-4"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-5"><span>Senza close button</span></button>
<dialog id="modal-5" class="modal ita-modal" aria-labelledby="modal-5-title">
    <div class="modal-box">
      
      <h2 id="modal-5-title" class="ita-modal-title">Titolo modale</h2>
      <div class="ita-modal-body">Testo che descrive lo scopo della modale e quali sono le azioni richieste all'utente.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-5"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-5"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
</div>

Con icona

Mostra il codice HTML

<button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-6"><span>Lancia la demo della modale</span></button>
<dialog id="modal-6" class="modal ita-modal ita-modal-alert" aria-labelledby="modal-6-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-6" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <div class="ita-modal-icon"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,16.5h1.2v1.8h-1.2V16.5z" /></svg></div>
      <h2 id="modal-6-title" class="ita-modal-title">Questo è un messaggio di notifica</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>

Con footer personalizzato

Mostra il codice HTML

<button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-7"><span>Lancia la demo della modale</span></button>
<dialog id="modal-7" class="modal ita-modal" aria-labelledby="modal-7-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-7" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-7-title" class="ita-modal-title">Con footer personalizzato</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><div class="flex w-full items-center justify-between gap-2">
        <a href="#" class="ita-link">Link di supporto</a>
        <div class="flex gap-2"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary"><span>Conferma</span></button></div>
      </div></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>

Con link list

Mostra il codice HTML

<button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-8"><span>Lancia la demo della modale</span></button>
<dialog id="modal-8" class="modal ita-modal" aria-labelledby="modal-8-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-8" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-8-title" class="ita-modal-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      <div class="ita-modal-body"><ul class="menu w-full gap-0 p-0">
        <li><a href="#" class="rounded-sm px-4 py-3 text-primary">Link lista 1</a></li>
        <li><a href="#" class="rounded-sm px-4 py-3 text-primary">Link lista 2</a></li>
        <li><a href="#" class="rounded-sm px-4 py-3 text-primary">Link lista 3</a></li>
      </ul></div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>

Popconfirm

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-9"><span>Popconfirm basico</span></button>
<dialog id="modal-9" class="modal ita-modal ita-modal-popconfirm" aria-label="Titolo modale">
    <div class="modal-box">
      
      
      <div class="ita-modal-body">Breve messaggio di conferma inserito nella modale.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline ita-btn-xs"><span>Azione 1</span></button><button type="button" class="ita-btn ita-btn-primary ita-btn-xs"><span>Azione 2</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-10"><span>Popconfirm con header</span></button>
<dialog id="modal-10" class="modal ita-modal ita-modal-popconfirm" aria-labelledby="modal-10-title">
    <div class="modal-box">
      
      <h2 id="modal-10-title" class="ita-modal-title">Titolo modale</h2>
      <div class="ita-modal-body">Breve messaggio di conferma inserito nella modale.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline ita-btn-xs"><span>Azione 1</span></button><button type="button" class="ita-btn ita-btn-primary ita-btn-xs"><span>Azione 2</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
</div>

Scroll interno alla modale

Mostra il codice HTML

<button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-11"><span>Lancia la demo della modale</span></button>
<dialog id="modal-11" class="modal ita-modal ita-modal-scroll" aria-labelledby="modal-11-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-11" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-11-title" class="ita-modal-title">Scroll interno</h2>
      <div class="ita-modal-body"><p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-11"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-11"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>

Dimensioni opzionali

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-12"><span>Small</span></button>
<dialog id="modal-12" class="modal ita-modal ita-modal-sm" aria-labelledby="modal-12-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-12" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-12-title" class="ita-modal-title">Modale small</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-12"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-12"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-13"><span>Default</span></button>
<dialog id="modal-13" class="modal ita-modal" aria-labelledby="modal-13-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-13" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-13-title" class="ita-modal-title">Modale default</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-13"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-13"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-14"><span>Large</span></button>
<dialog id="modal-14" class="modal ita-modal ita-modal-lg" aria-labelledby="modal-14-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-14" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-14-title" class="ita-modal-title">Modale large</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-14"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-14"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-15"><span>Extra large</span></button>
<dialog id="modal-15" class="modal ita-modal ita-modal-xl" aria-labelledby="modal-15-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-15" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-15-title" class="ita-modal-title">Modale extra large</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-15"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-15"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
</div>

Allineamento

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-3">
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-16"><span>A sinistra</span></button>
<dialog id="modal-16" class="modal ita-modal modal-start" aria-labelledby="modal-16-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-16" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-16-title" class="ita-modal-title">Allineata a sinistra</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-16"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-16"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-17"><span>Centrata</span></button>
<dialog id="modal-17" class="modal ita-modal" aria-labelledby="modal-17-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-17" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-17-title" class="ita-modal-title">Centrata</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-17"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-17"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
  <button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-18"><span>A destra</span></button>
<dialog id="modal-18" class="modal ita-modal modal-end" aria-labelledby="modal-18-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-18" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-18-title" class="ita-modal-title">Allineata a destra</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-18"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-18"><span>Conferma</span></button></div>
    </div>
    <form method="dialog" class="modal-backdrop"><button>Chiudi finestra modale</button></form>
</dialog>
</div>

Backdrop statico

Senza il form di backdrop il click fuori non chiude: resta il pulsante di chiusura.

Mostra il codice HTML

<button type="button" class="ita-btn ita-btn-primary" command="show-modal" commandfor="modal-19"><span>Backdrop statico</span></button>
<dialog id="modal-19" class="modal ita-modal" aria-labelledby="modal-19-title">
    <div class="modal-box">
      <button type="button" command="close" commandfor="modal-19" class="ita-modal-close" aria-label="Chiudi finestra modale"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l6.7,6.6l-0.8,0.8L12,12.7l-6.6,6.7l-0.8-0.8l6.7-6.6L4.6,5.4l0.8-0.8l6.6,6.7l6.6-6.7l0.8,0.8L12.7,12z" /></svg></button>
      <h2 id="modal-19-title" class="ita-modal-title">Backdrop statico</h2>
      <div class="ita-modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div class="modal-action"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline" command="close" commandfor="modal-19"><span>Annulla</span></button><button type="button" class="ita-btn ita-btn-primary" command="close" commandfor="modal-19"><span>Conferma</span></button></div>
    </div>
</dialog>