Mobile Menu

Modal

Content

Open Modal

My details modal

You can click the X in the corner or click the overlay to close this modal. Something like this could be useful as a nice way to show additional information, but that's about as far as I would take it. It's just a nice way of styling the details element.

<details>
  <summary>
    <div class="nhs-btn nhs-fancy2">
      Open Modal
    </div>
    <div class="nhs-modal-overlay"></div>
  </summary>
  <div class="nhs-modal">
    <div class="nhs-modal-close">
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
        <path d="M0 0h24v24H0V0z" fill="none" />
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
      </svg>
    </div>
    <div class="nhs-modal-title">
      <h1>My details modal</h1>
    </div>
    <div class="nhs-modal-content">
      <p>
        You can click the X in the corner or click the overlay to close this modal.
        Something like this could be useful as a nice way to show additional information,
        but that's about as far as I would take it. It's just a nice way of styling the details element.
      </p>
    </div>
  </div>
</details>