JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.githack.com/Nycto/PicoModal/master/src/picoModal.js"></script>
CSS
.footer {
position: absolute;
bottom: 0;
background: #efefef;
width: 100%;
left: 0;
padding: 10px;
box-sizing: border-box;
margin: 0;
text-align: right;
}
.pico-content > :first-child {
margin-bottom: 50px;
}
JavaScript
picoModal({
content: "<p>Ah, the pitter patter of tiny feet in huge combat boots.</p>" +
"<p class='footer'>" +
"<button class='cancel'>Cancel</button> " +
"<button class='ok'>Ok</button>" +
"</p>"
}).afterCreate(modal => {
modal.modalElem().addEventListener("click", evt => {
if (evt.target && evt.target.matches(".ok")) {
modal.close(true);
} else if (evt.target && evt.target.matches(".cancel")) {
modal.close();
}
});
}).afterClose((modal, evt) => {
alert(evt.detail ? "Ok" : "Cancelled");
}).show();