css 4 modal

1<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
2  <div class="modal-dialog modal-dialog-centered">
3    <div class="modal-content">
4      <div class="modal-header">
5        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
6        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
7      </div>
8      <div class="modal-body">
9        Show a second modal and hide this one with the button below.
10      </div>
11      <div class="modal-footer">
12        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
13      </div>
14    </div>
15  </div>
16</div>
17<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
18  <div class="modal-dialog modal-dialog-centered">
19    <div class="modal-content">
20      <div class="modal-header">
21        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
22        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
23      </div>
24      <div class="modal-body">
25        Hide this modal and show the first with the button below.
26      </div>
27      <div class="modal-footer">
28        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
29      </div>
30    </div>
31  </div>
32</div>
33<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>