How to put the result of a fetch content in a modal ?
Here my solution :
const Content = {};
Content["apropos"] = () => `
<div style="text-align:center">
Demoing filling modal content with fetch results.
<br />
Get some Chuck Norris quotes
</div>
`
Content['cnquotes'] = async () => {
const resp = await fetch('https://api.chucknorris.io/jokes/random')
const json = await resp.json()
return `
<div class="cnquotes">
${json.value}
</div>
`
}
window.State = {
content: null,
isOpen: false,
openDialog: function(key){
State.content = Content[key]
State.isOpen = true;
view()
},
closeDialog: function(){
State.isOpen = false;
view()
}
}
async function view () {
var modalCls = State.isOpen
? "modal modal-shown"
: "modal modal-hidden"
modal.innerHTML = `
<div class="${modalCls}">
<div class="modal-content">
<div style="text-align:right" onclick="State.closeDialog()">
<span class="modal-close">close</span>
</div>
<p>${await State.content()}</p>
</div>
</div>
`
}
triggerModal.addEventListener("click", function (e) {
var modal = e.target.getAttribute("modal")
modal && State.openDialog(modal)
})
You can play with it here : Async Modal Content