<mercury-dialog>

A web component just for me.

Example: Modal Property

Maybe in order to understand mankind, we have to look at the word itself: "Mankind". Basically, it's made up of two separate words - "mank" and "ind". What do these words mean ? It's a mystery, and that's why so is mankind.

HTML

<button id="openDialogButton">Open Dialog</button>
<mercury-dialog id="mercuryDialog" open modal dialogTitle="My Dialog">
<p>Maybe in order to understand mankind, we have to look at the word itself: "Mankind". Basically, it's made up of two separate words - "mank" and "ind". What do these words mean ? It's a mystery, and that's why so is mankind.</p>
<footer>
<p>Powered by Mercury Dialog</p>
</footer>
</mercury-dialog>

JS

document.getElementById('openDialogButton')
.addEventListener(
'click',
event => document.getElementById('mercuryDialog').show()
);