Simple Modal

<button class="btn btn-brand btn-accent" id="simple-modal-btn">
    Show Modal
</button>

<dialog id="simple-modal" class="modal">
    <div class="modal-wrapper">
        <h2 class="modal-header">Modal Header</h2>
        <span class="modal-text">Modal Body Text</span>
        <form method="dialog" class="modal-actions">
            <button class="btn btn-brand btn-primary">Action 1</button>
            <button class="btn btn-brand btn-secondary">Action 2</button>
        </form>
    </div>
</dialog>
      

Choice Modal

Modal Header

Choice 1

Choice 2

Choice 3

Action 1 Action 2

<button class="btn btn-brand btn-accent" id="choice-modal-btn">
    Show Modal
</button>

<dialog id="choice-modal" class="modal">
  <div class="modal-wrapper">
    <h2 class="modal-header">Modal Header</h2>
    <form method="dialog" class="modal-choices">
        <div class="modal-input">
            <input type="radio" name="radio" id="choice" />
            <label for="choice">Choice 1</label>
        </div>
        <div class="modal-input">
            <input type="radio" name="radio" id="choice" />
            <label for="choice">Choice 2</label>
        </div>
        <div class="modal-input">
            <input type="radio" name="radio" id="choice" />
            <label for="choice">Choice 3</label>
        </div>
        <div class="modal-actions">
            <button class="btn btn-brand btn-primary">Action 1</button>
            <button class="btn btn-brand btn-secondary">Action 2</button>
        </div>
    </form>
  </div>
</dialog>