[[!Speedbump?]]
<?php
$tpl = $modx->getOption('tpl', $scriptProperties, 'default_modal');
$classTrigger = $modx->getOption('classTrigger', $scriptProperties, 'external');
$output = $modx->getChunk($tpl,array(
'classTrigger' => $classTrigger,
));
return $output;
chunk - default_modal
<script>
const modalButton = document.querySelector(".[[+classTrigger]]");
const extra = document.createElement("div");
const modalhtml = `
<div class="modal-header">
🔗 You're Leaving Our Site!<span class="close-modal" onclick="closeModal()">×</span>
</div>
<div class="modal-body">
This is a link to an external site.<br/><br/>
<div class="show-link"></div><br/>
Click OK to continue to the content. Feel free to comeback again. Make Sure To Follow Instructions Properly.
</div>
<div class="modal-footer">
<button class="close-modal" onclick="closeModal()">Close</button>
<button class="confirm-modal">OK</>
</div>
`;
var openModal;
if (modalButton)
{
const getlink = modalButton.getAttribute("href");
modalButton.addEventListener("click", () => {
openModal();
});
openModal = function () {
extra.classList.add("modal-content");
extra.innerHTML = modalhtml;
document.body.appendChild(extra);
document.querySelector(".show-link").innerHTML = "(" + getlink + ")";
document.querySelector(".confirm-modal").addEventListener("click", (e) => {
window.open(getlink, "_blank");
extra.remove();
});
};
}
function closeModal() {
extra.remove();
}
</script>
It works, but I don’t like having the html in a script in a chuck.