Bulma | Modal

Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.

El Modal es una superposición clásica en la que se puede incluir cualquier contenido. El componente modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual una vez que se hace clic en el botón de activación. El componente ‘modal’ incluye varios otros componentes que se pueden agregar para diseñar el contenido. Estos componentes se enumeran a continuación:

  • modal-background: es la superposición transparente que actúa como un destino de clic para cerrar el modal.
  • modal-content: Es el contenedor con un ancho máximo de ‘640px’. Este contenedor muestra el contenido de la clase modelo.
  • modal-close: es la ‘cruz’ ubicada en la esquina superior derecha que solía cerrar el modal.

Ejemplo 1:

html

<!DOCTYPE html>
<html>
<head>
  <title>Bulma Modal</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
  
  <!-- FontAwesome Library -->
  <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
  </script>
  
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 50px;
    }
  
    .modal-content {
      margin-top: 100px;
      width: 450px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-4'>
        <button class="button is-primary"
                id='btn'>Click to see modal</button>
        <div class="modal">
          <div class="modal-background"></div>
          <div class="modal-content">
  
            <div class='box'>
              <h1 class='title' 
                  style='color:green'>
                Geek for Geeks</h1>
              <p class='is-family-monospace'>
                'GeeksforGeeks' is a computer 
                science portal.it was created with
                a goal in mind to provide well 
                written, well thought and
                well explained solutions for 
                selected questions. The core team
                of five super geeks constituting
                of technology lovers and
                computer science enthusiasts 
                have been constantly working
                in this direction .
              </p>
              <div class='buttons'>
                <button class='button is-fullwidth'>
                  Know more about GfG
                </button>
              </div>
            </div>
          </div>
          <button class="modal-close is-large" 
                  aria-label="close">
            Model
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // Bulma does not have JavaScript included,
    // hence custom JavaScript has to be
    // written to open or close the modal
    const modal = 
          document.querySelector('.modal');
    const btn = 
          document.querySelector('#btn')
    const close = 
          document.querySelector('.modal-close')
  
    btn.addEventListener('click',
                         function () {
      modal.style.display = 'block'
    })
  
    close.addEventListener('click',
                           function () {
      modal.style.display = 'none'
    })
  
    window.addEventListener('click',
                            function (event) {
      if (event.target.className === 
          'modal-background') {
        modal.style.display = 'none'
      }
    })
  </script>
</body>
</html>

Producción:

Ejemplo 2: formulario de inicio de sesión modal.

html

<!DOCTYPE html>
<html>
<head>
  <title>Bulma Modal</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
  
  <!-- FontAwesome Library -->
  <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
  </script>
  
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 50px;
    }
  
    .modal-content {
      margin-top: 100px;
      width: 450px;
    }
  
    .buttons {
      margin-top: 12px;
    }
  </style>
</head>
  
<body>
  <div class='container'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-4'>
        <div class='has-text-centered'>
          <button class="button is-primary"
                  id='btn'>
            Login form modal
          </button>
        </div>
        <div class="modal">
          <div class="modal-background"></div>
          <div class="modal-content">
            <div class="box">
              <div>
                <h1 class='title has-text-centered'>
                  Login
                </h1>
              </div>
              <form action='#' method='post'>
                <div class='field'>
                  <label class='label'
                         id='username'>
                    Username
                  </label>
                  <div class='control has-icons-left'>
                    <input class='input'
                           type='text'
                           for='username' 
                           placeholder='Username'>
                    <span class="icon is-small is-left">
                      <i class="fas fa-user"></i>
                    </span>
                  </div>
                </div>
  
                <div class='field'>
                  <label class='label' 
                         id='password'>
                    Password
                  </label>
                  <div class='control has-icons-left'>
                    <input class='input'
                           type='password'
                           for='password' 
                           placeholder='Password'>
                    <span class="icon is-small is-left">
                      <i class="fas fa-lock"></i>
                    </span>
                  </div>
  
                  <div class='buttons'>
                    <button class='button is-link'>
                      Login
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <button class="modal-close is-large"
                  aria-label="close">
            Model
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // Bulma does not have JavaScript included,
    // hence custom JavaScript has to be
    // written to open or close the modal
    const modal = document.querySelector('.modal');
    const btn = document.querySelector('#btn')
    const close = document.querySelector('.modal-close')
  
    btn.addEventListener('click',
                         function () {
      modal.style.display = 'block'
    })
  
    close.addEventListener('click',
                           function () {
      modal.style.display = 'none'
    })
  
    window.addEventListener('click',
                            function (event) {
      if (event.target.className ===
          'modal-background') {
        modal.style.display = 'none'
      }
    })
  </script>
</body>
</html>

Producción:

Ejemplo 3: Modal para mostrar mensajes de twitter.

html

<!DOCTYPE html>
<html>
<head>
  <title>Bulma Modal</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
  
  <!-- FontAwesome Library -->
  <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
  </script>
  
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 50px;
    }
  
    .modal-content {
      margin-top: 100px;
      width: 450px;
    }
  </style>
</head>
  
<body>
  <div class='container'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-4'>
        <div class='has-text-centered'>
          <button class="button is-primary"
                  id='btn'>
            Twitter Messages
          </button>
        </div>
        <div class="modal">
          <div class="modal-background">
          </div>
          <div class="modal-content">
            <div class="box">
              <article class="media">
                <div class="media-left">
                  <figure class="image is-64x64">
                    <img src =
"https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png">
                  </figure>
                </div>
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>GeekforGeeks</strong> 
                      <small>@geekforgeeks</small>
                      <small>36m</small>
                      <br>
                      Hey, There!
                      <br>
                      'GeeksforGeeks' is a computer science
                      portal.it was created with a goal in
                      mind to provide well written, well 
                      thought and well explained solutions
                      for selected questions. The core team
                      of five super geeks constituting of
                      technology lovers and computer science
                      enthusiasts have been constantly working
                      in this direction .
                    </p>
                  </div>
                  <nav class="level is-mobile">
                    <div class="level-left">
                      <a class="level-item">
                        <span class="icon is-small">
                          <i class="fas fa-reply"></i>
                        </span>
                      </a>
                      <a class="level-item">
                        <span class="icon is-small">
                          <i class="fas fa-retweet"></i>
                        </span>
                      </a>
                      <a class="level-item">
                        <span class="icon is-small">
                          <i class="fas fa-heart"></i>
                        </span>
                      </a>
                    </div>
                  </nav>
                </div>
              </article>
            </div>
          </div>
          <button class="modal-close is-large" 
                  aria-label="close">
            Model
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // Bulma does not have JavaScript included,
    // hence custom JavaScript has to be
    // written to open or close the modal
    const modal =
          document.querySelector('.modal');
    const btn =
          document.querySelector('#btn')
    const close =
          document.querySelector('.modal-close')
  
    btn.addEventListener('click',
                         function () {
      modal.style.display = 'block'
    })
  
    close.addEventListener('click',
                           function () {
      modal.style.display = 'none'
    })
  
    window.addEventListener('click',
                            function (event) {
      if (event.target.className ===
          'modal-background') {
        modal.style.display = 'none'
      }
    })
  </script>
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *