Modal Trigger

Loading…

Modal Trigger | GoSnippets

Source Code

1<!-- Trigger button -->
2<div class="container py-4 text-center">
3  <button type="button" class="btn btn-primary btn-lg px-5"
4    data-bs-toggle="modal" data-bs-target="#demoModal">
5    Open Modal
6  </button>
7</div>
8
9<!-- Modal -->
10<div class="modal fade" id="demoModal" tabindex="-1"
11  aria-labelledby="demoModalLabel" aria-hidden="true">
12  <div class="modal-dialog modal-dialog-centered">
13    <div class="modal-content border-0 shadow-lg">
14      <div class="modal-header border-0 pb-0">
15        <h5 class="modal-title fw-bold fs-4" id="demoModalLabel">
16          Confirm Action
17        </h5>
18        <button type="button" class="btn-close" data-bs-dismiss="modal"
19          aria-label="Close"></button>
20      </div>
21      <div class="modal-body py-4">
22        <p class="text-muted mb-0">
23          Are you sure you want to proceed? This action cannot be undone
24          and will permanently affect your account settings.
25        </p>
26      </div>
27      <div class="modal-footer border-0 pt-0 gap-2">
28        <button type="button" class="btn btn-light"
29          data-bs-dismiss="modal">Cancel</button>
30        <button type="button" class="btn btn-primary px-4">
31          Confirm
32        </button>
33      </div>
34    </div>
35  </div>
36</div>

Source Code

More Modals snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery