Customizable CSS
search

Modals

Trigger a modal

To create a modal frist you must create the trigger, a triggers is basically a element that include the class .modal-trigger and a data propert data-target set to the modal element id

<button 
  class="btn btn-primary modal-trigger" 
  data-target="my-modal">
  Show modal
</button>
<div class="modal modal-animated" id="my-modal">
  ...
</div>

then you can add content to the modal

<button 
  class="btn btn-primary modal-trigger" 
  data-target="my-modal">
  Show modal
</button>
<div class="modal modal-animated" id="my-modal">
  <div class="modal-container">
    <div class="modal-content">
      <div class="modal-header">
          <div class="display-flex justify-between">
              <p class="modal-title">
                  My Modal title
              </p>
              <button class="close modal-trigger" data-target="my-modal">
              </button>
          </div>
      </div>
      <div class="modal-body">
              Modal body goes here
      </div>
      <div class="modal-footer">
          <button class="btn btn-primary p-2">
              Option a
          </button>
          <button class="btn btn-primary-flat p-2">
              option B
          </button>
      </div>
    </div>
  </div>
</div>

the class modal .modal-animated is use to add transition animation but it can be disable by removing it.

You can change the max width of the modal content by using on of the following classes

Class Width
deafult 600px
.modal-xxl 1400px
.modal-xl 1280px
.modal-lg 720px
.modal-sm 350px

On this page

Site

Support

Customizable CSS By Haniel Hernández. 2021