Get started with picomodal CDN
Stable version
Copied!
How to start using picomodal CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/picotns.min.css">
<link rel="stylesheet" href="https://cdn.cdnhub.io/picomodal/3.0.0/picoModal.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/picotns.min.js"></script>
<script src="https://cdn.cdnhub.io/picomodal/3.0.0/picoModal.min.js"></script>
</head>
<body>
<button id="open-modal">Open Modal</button>
<div id="my-modal" class="pico-modal pico-fade-in pico-show" tabindex="-1" role="dialog" aria-hidden="true">
<h2>Modal Title</h2>
<p>Modal Content</p>
<button id="close-modal" class="pico-button pico-default-outline pico-modal-close" aria-label="Close modal">Close</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const openModalButton = document.getElementById('open-modal');
const closeModalButton = document.getElementById('close-modal');
const modal = document.getElementById('my-modal');
openModalButton.addEventListener('click', () => {
modal.showModal();
});
closeModalButton.addEventListener('click', () => {
modal.close();
});
});
</script>
</body>
</html>
Copied!
Copied!
Copied!