Fondazione - Rivela le dimensioni

Descrizione

Crea diversi tipi di modali come modali piccoli, piccoli e grandi aggiungendo classi minuscole , piccole e grandi come descritto di seguito -

Modale di piccole dimensioni

Crea una piccola dimensione di modale.

Esempio

L'esempio seguente dimostra l'uso di modal di dimensioni ridotte in Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
      
      <title>Reveal Tiny Size Modal</title>
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Reveal Tiny Size of Modal Example</h2>
      <p><a data-toggle = "reveal_modal">Click here to open modal</a></p>
      
      <div class = "tiny reveal" id = "reveal_modal" data-reveal>
         <h2>Tiny Modal</h2>
         <p>Foundation is semantic, readable, flexible, and completely customizable.</p>
         
         <button class = "close-button" data-close aria-label = "Close reveal" type = "button">
            <span aria-hidden = "true">×</span>
         </button>
      </div>
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato reveal_tiny_modal.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Modale di piccole dimensioni

Crea una piccola dimensione di modale.

Esempio

L'esempio seguente dimostra l'uso di modal di piccole dimensioni in Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
      
      <title>Reveal Small Size Modal</title>
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Reveal Small Size of Modal Example</h2>
      <p><a data-toggle = "reveal_modal">Click here to open modal</a></p>
      
      <div class = "small reveal" id = "reveal_modal" data-reveal>
         <h2>Small Modal</h2>
         <p>Foundation is semantic, readable, flexible, and completely customizable.</p>
         
         <button class = "close-button" data-close aria-label = "Close reveal" type = "button">
            <span aria-hidden = "true">×</span>
         </button>
      </div>
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato reveal_small_modal.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Modale di grandi dimensioni

Crea un modale di grandi dimensioni.

Esempio

L'esempio seguente mostra l'uso di modal di grandi dimensioni in Foundation:

<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
      
      <title>Reveal Large Size Modal</title>
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Reveal Large Size of Modal Example</h2>
      <p><a data-toggle = "reveal_modal">Click here to open modal</a></p>
      
      <div class = "large reveal" id = "reveal_modal" data-reveal>
         <h2>Large Modal</h2>
         <p>Foundation is semantic, readable, flexible, and completely customizable.</p>
         
         <button class = "close-button" data-close aria-label = "Close reveal" type = "button">
            <span aria-hidden = "true">×</span>
         </button>
      </div>
      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice html sopra indicato reveal_large_modal.html file.

  • Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.