HTML
CSS
JS
Run
<script src="https://cdn.tailwindcss.com"></script> <h1 class="text-lg font-bold text-gray-700 text-center my-12">How To Create - Modal / Popup using TailwindCSS</h1> <!-- Trigger/Open The Modal --> <div class="text-center"> <button id="btnModal" class="bg-sky-500 hover:bg-sky-700 px-6 py-3 text-sm rounded-full font-semibold text-white"> Open Modal </button> </div> <!-- modal start --> <div id="modal" class="modal fixed inset-0 z-50 hidden items-center justify-center overflow-auto bg-black/40"> <div class="modal-content relative rounded-xl bg-white drop-shadow-xl max-w-3xl w-11/12 animation-zoomIn"> <!-- modal header start --> <div class="modal-header pl-6 pr-12 py-5 border-b"> <span class="close text-3xl absolute right-6 leading-8 cursor-pointer text-slate-500 hover:text-slate-700">×</span> <h2 class="text-xl font-medium text-gray-800">Modal Header</h2> </div> <!-- modal header end --> <!-- modal body start --> <div class="modal-body p-6"> <p>Some text in the Modal Body</p> <p>Some other text...</p> </div> <!-- modal body end --> <!-- modal footer start --> <div class="px-6 bg-slate-50 py-5 border-t text-right rounded-b-xl"> <button class="bg-slate-200 hover:bg-slate-300 px-8 py-3 text-sm rounded-md font-semibold text-gray-800 mr-3"> Draft </button> <button class="bg-sky-500 hover:bg-sky-700 px-8 py-3 text-sm rounded-md font-semibold text-white"> Submit </button> </div> <!-- modal footer end --> </div> </div> <!-- modal end -->
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); body{ font-family: 'Roboto', sans-serif; } /*** optional css ***/ /* zoom in animation */ .animation-zoomIn { animation-name: zoomIn; animation-duration: 0.7s } @keyframes zoomIn { from { transform: scale(0);} to {transform: scale(1);} }
<script>var modal = document.getElementById("modal"); var btn = document.getElementById("btnModal"); var span = document.getElementsByClassName("close")[0]; // open modal, when user clicks the button btn.onclick = function() { modal.style.display = "flex"; } // close modal, when user clicks on (x), span.onclick = function() { modal.style.display = "none"; } // close modal, when user clicks anywhere outside of the modal //window.onclick = function(event) { // if (event.target == modal) { // modal.style.display = "none"; //} //}</script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
