Posh UI

Modal

Modal can be used for creating dialog boxes, to communicate with user.

                    
<div class="modal">
  <div class="modal-head">Modal Head</div>

  <p class="modal-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
    ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.
  </p>

  <div class="modal-foot">
    <button class="btn btn-primary-outline">Close</button>
    <button class="btn btn-primary-solid">Save Changes</button>
  </div>
</div>
              
            
                    
<button
  id="modal-demo-btn"
  class="btn btn-primary-solid btn-squared"
>
  Modal Demo
</button>

<div id="modal-container" class="d-none modal-container">
  <div class="mx-auto modal">
    <div class="modal-head">Modal Head</div>

    <p class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>

    <div class="modal-foot">
      <button
        id="modal-close-btn"
        class="btn btn-primary-outline"
      >
        Close
      </button>
      <button class="btn btn-primary-solid">Save Changes</button>
    </div>
  </div>
</div>