mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
73 lines
2.6 KiB
HTML
73 lines
2.6 KiB
HTML
|
<div class="buttons">
|
||
|
|
<button class="button js-modal-trigger" data-target="modal-empty">Empty</button>
|
||
|
|
<button class="button js-modal-trigger" data-target="modal-image">Image</button>
|
||
|
|
<button class="button js-modal-trigger" data-target="modal-box">Box</button>
|
||
|
|
<button class="button js-modal-trigger" data-target="modal-card">Card</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="modal-empty" class="modal">
|
||
|
|
<div class="modal-background"></div>
|
||
|
|
<div class="modal-content">
|
||
|
|
<!-- Any other Bulma elements you want -->
|
||
|
|
</div>
|
||
|
|
<button class="modal-close is-large" aria-label="close"></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="modal-image" class="modal">
|
||
|
|
<div class="modal-background"></div>
|
||
|
|
<div class="modal-content">
|
||
|
|
<p class="image is-4by3">
|
||
|
|
<img alt="Placeholder" src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<button class="modal-close is-large" aria-label="close"></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="modal-box" class="modal">
|
||
|
|
<div class="modal-background"></div>
|
||
|
|
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="box">
|
||
|
|
<p>Modal JS example</p>
|
||
|
|
<!-- Your content -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="modal-close is-large" aria-label="close"></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="modal-card" class="modal">
|
||
|
|
<div class="modal-background"></div>
|
||
|
|
|
||
|
|
<div class="modal-card">
|
||
|
|
<header class="modal-card-head">
|
||
|
|
<p class="modal-card-title">Modal title</p>
|
||
|
|
<button class="delete" aria-label="close"></button>
|
||
|
|
</header>
|
||
|
|
<section class="modal-card-body">
|
||
|
|
<div class="content">
|
||
|
|
<h1>Hello World</h1>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices
|
||
|
|
eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce
|
||
|
|
erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!
|
||
|
|
</p>
|
||
|
|
<h2>Second level</h2>
|
||
|
|
<p>
|
||
|
|
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi,
|
||
|
|
sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis
|
||
|
|
sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<footer class="modal-card-foot">
|
||
|
|
<div class="buttons">
|
||
|
|
<button class="button is-success">Save changes</button>
|
||
|
|
<button class="button">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="modal-close is-large" aria-label="close"></button>
|
||
|
|
</div>
|