1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-odpwh2d0jv">Show
|
9 | modal</button>
|
10 |
|
11 | <div data-modal id="modal-odpwh2d0jv" class="bx--modal " role="dialog"
|
12 | aria-modal="true" aria-labelledby="modal-odpwh2d0jv-label" aria-describedby="modal-odpwh2d0jv-heading" tabindex="-1">
|
13 | <div class="bx--modal-container bx--modal-container--lg">
|
14 | <div class="bx--modal-header">
|
15 | <p class="bx--modal-header__label bx--type-delta" id="modal-odpwh2d0jv-label">Optional label</p>
|
16 | <p class="bx--modal-header__heading bx--type-beta" id="modal-odpwh2d0jv-heading">Modal heading</p>
|
17 | <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" data-modal-primary-focus>
|
18 | <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"></path></svg>
|
19 | </button>
|
20 | </div>
|
21 |
|
22 |
|
23 |
|
24 | <div class="bx--modal-content" >
|
25 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
|
26 | vitae
|
27 | tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
|
28 | facilisi.
|
29 | Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
|
30 |
|
31 | </div>
|
32 | <div class="bx--modal-content--overflow-indicator"></div>
|
33 |
|
34 | </div>
|
35 |
|
36 | <span tabindex="0"></span>
|
37 | </div>
|