carbon-components
Version:
Carbon Components is a component library for IBM Cloud
39 lines (33 loc) • 1.96 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<button class="bx--btn bx--btn--danger" type="button" data-modal-target="#modal-x11w23nn6ep">Show
modal</button>
<div data-modal id="modal-x11w23nn6ep" class="bx--modal bx--modal--danger" role="dialog"
aria-modal="true" aria-labelledby="modal-x11w23nn6ep-label" aria-describedby="modal-x11w23nn6ep-heading" tabindex="-1">
<div class="bx--modal-container">
<div class="bx--modal-header">
<p class="bx--modal-header__label bx--type-delta" id="modal-x11w23nn6ep-label">Optional label</p>
<p class="bx--modal-header__heading bx--type-beta" id="modal-x11w23nn6ep-heading">Modal heading</p>
<button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
<svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<title>Close Modal</title>
<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z" fill-rule="nonzero"
/>
</svg>
</button>
</div>
<div class="bx--modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue
vitae
tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
facilisi.
Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
</div>
<div class="bx--modal-footer">
<button class="bx--btn bx--btn--tertiary" type="button" data-modal-close>Secondary button</button>
<button class="bx--btn bx--btn--danger" type="button" aria-label="Danger"
data-modal-primary-focus>Primary button</button> </div> </div>
</div>