Modal is used to show a dialog or a box when you click a button.
Class name | Type | |
---|---|---|
modal | Component | Modal |
modal-box | Part | The content part |
modal-action | Part | Actions part (buttons, etc.) |
modal-backdrop | Part | Label that covers the page when modal is open so we can close the modal by clicking outside |
modal-toggle | Part | Hidden checkbox that controls the state of modal |
modal-open | Modifier | Keeps the modal open (you can add this class uisng JS) |
modal-top | Placement | Moves the modal to top |
modal-middle | Placement | Moves the modal to middle (default) |
modal-bottom | Placement | Moves the modal to bottom |
modal-start | Placement | Moves the modal to start horizontally |
modal-end | Placement | Moves the modal to end horizontally |
<dialog>
elementEsc
key<input type="checkbox">
to conrol the sate of modal and <label>
to check/uncheck the checkbox and open/close the modal<a>
anchor linksrecommended
HTML dialog element is a native way to create modals. It is accessible and we can close the modal using Esc
key.
We can open the modal using JS ID.showModal()
method and close it using ID.close()
method.
The ID must be unique for each modal.
<!-- Open the modal using ID.showModal() method --> <button class="$$btn" onclick="my_modal_1.showModal()">open modal</button> <dialog id="my_modal_1" class="$$modal"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">Press ESC key or click the button below to close</p> <div class="$$modal-action"> <form method="dialog"> <!-- if there is a button in form, it will close the modal --> <button class="$$btn">Close</button> </form> </div> </div> </dialog>
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="$$modal">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div class="$$modal-action">
<form method="dialog">
<!-- if there is a button in form, it will close the modal -->
<button class="$$btn">Close</button>
</form>
</div>
</div>
</dialog>
{/* Open the modal using document.getElementById('ID').showModal() method */} <button className="$$btn" onClick={()=>document.getElementById('my_modal_1').showModal()}>open modal</button> <dialog id="my_modal_1" className="$$modal"> <div className="$$modal-box"> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Press ESC key or click the button below to close</p> <div className="$$modal-action"> <form method="dialog"> {/* if there is a button in form, it will close the modal */} <button className="$$btn">Close</button> </form> </div> </div> </dialog>
{/* Open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_1').showModal()}>open modal</button>
<dialog id="my_modal_1" className="$$modal">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Press ESC key or click the button below to close</p>
<div className="$$modal-action">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="$$btn">Close</button>
</form>
</div>
</div>
</dialog>
<!-- Open the modal using ID.showModal() method --> <button class="$$btn" onclick="my_modal_2.showModal()">open modal</button> <dialog id="my_modal_2" class="$$modal"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">Press ESC key or click outside to close</p> </div> <form method="dialog" class="$$modal-backdrop"> <button>close</button> </form> </dialog>
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_2.showModal()">open modal</button>
<dialog id="my_modal_2" class="$$modal">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click outside to close</p>
</div>
<form method="dialog" class="$$modal-backdrop">
<button>close</button>
</form>
</dialog>
{/* Open the modal using document.getElementById('ID').showModal() method */} <button className="$$btn" onClick={()=>document.getElementById('my_modal_2').showModal()}>open modal</button> <dialog id="my_modal_2" className="$$modal"> <div className="$$modal-box"> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Press ESC key or click outside to close</p> </div> <form method="dialog" className="$$modal-backdrop"> <button>close</button> </form> </dialog>
{/* Open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_2').showModal()}>open modal</button>
<dialog id="my_modal_2" className="$$modal">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Press ESC key or click outside to close</p>
</div>
<form method="dialog" className="$$modal-backdrop">
<button>close</button>
</form>
</dialog>
<!-- You can open the modal using ID.showModal() method --> <button class="$$btn" onclick="my_modal_3.showModal()">open modal</button> <dialog id="my_modal_3" class="$$modal"> <div class="$$modal-box"> <form method="dialog"> <button class="$$btn $$btn-sm $$btn-circle $$btn-ghost absolute right-2 top-2">✕</button> </form> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">Press ESC key or click on ✕ button to close</p> </div> </dialog>
<!-- You can open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_3.showModal()">open modal</button>
<dialog id="my_modal_3" class="$$modal">
<div class="$$modal-box">
<form method="dialog">
<button class="$$btn $$btn-sm $$btn-circle $$btn-ghost absolute right-2 top-2">✕</button>
</form>
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click on ✕ button to close</p>
</div>
</dialog>
{/* You can open the modal using document.getElementById('ID').showModal() method */} <button className="$$btn" onClick={()=>document.getElementById('my_modal_3').showModal()}>open modal</button> <dialog id="my_modal_3" className="$$modal"> <div className="$$modal-box"> <form method="dialog"> {/* if there is a button in form, it will close the modal */} <button className="$$btn $$btn-sm $$btn-circle $$btn-ghost absolute right-2 top-2">✕</button> </form> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Press ESC key or click on ✕ button to close</p> </div> </dialog>
{/* You can open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_3').showModal()}>open modal</button>
<dialog id="my_modal_3" className="$$modal">
<div className="$$modal-box">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="$$btn $$btn-sm $$btn-circle $$btn-ghost absolute right-2 top-2">✕</button>
</form>
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Press ESC key or click on ✕ button to close</p>
</div>
</dialog>
<!-- You can open the modal using ID.showModal() method --> <button class="$$btn" onclick="my_modal_4.showModal()">open modal</button> <dialog id="my_modal_4" class="$$modal"> <div class="$$modal-box w-11/12 max-w-5xl"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">Click the button below to close</p> <div class="$$modal-action"> <form method="dialog"> <!-- if there is a button, it will close the modal --> <button class="$$btn">Close</button> </form> </div> </div> </dialog>
<!-- You can open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_4.showModal()">open modal</button>
<dialog id="my_modal_4" class="$$modal">
<div class="$$modal-box w-11/12 max-w-5xl">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Click the button below to close</p>
<div class="$$modal-action">
<form method="dialog">
<!-- if there is a button, it will close the modal -->
<button class="$$btn">Close</button>
</form>
</div>
</div>
</dialog>
{/* You can open the modal using document.getElementById('ID').showModal() method */} <button className="$$btn" onClick={()=>document.getElementById('my_modal_4').showModal()}>open modal</button> <dialog id="my_modal_4" className="$$modal"> <div className="$$modal-box w-11/12 max-w-5xl"> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Click the button below to close</p> <div className="$$modal-action"> <form method="dialog"> {/* if there is a button, it will close the modal */} <button className="$$btn">Close</button> </form> </div> </div> </dialog>
{/* You can open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_4').showModal()}>open modal</button>
<dialog id="my_modal_4" className="$$modal">
<div className="$$modal-box w-11/12 max-w-5xl">
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Click the button below to close</p>
<div className="$$modal-action">
<form method="dialog">
{/* if there is a button, it will close the modal */}
<button className="$$btn">Close</button>
</form>
</div>
</div>
</dialog>
<!-- Open the modal using ID.showModal() method --> <button class="$$btn" onclick="my_modal_5.showModal()">open modal</button> <dialog id="my_modal_5" class="$$modal $$modal-bottom sm:$$modal-middle"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">Press ESC key or click the button below to close</p> <div class="$$modal-action"> <form method="dialog"> <!-- if there is a button in form, it will close the modal --> <button class="$$btn">Close</button> </form> </div> </div> </dialog>
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_5.showModal()">open modal</button>
<dialog id="my_modal_5" class="$$modal $$modal-bottom sm:$$modal-middle">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div class="$$modal-action">
<form method="dialog">
<!-- if there is a button in form, it will close the modal -->
<button class="$$btn">Close</button>
</form>
</div>
</div>
</dialog>
{/* Open the modal using document.getElementById('ID').showModal() method */} <button className="$$btn" onClick={()=>document.getElementById('my_modal_5').showModal()}>open modal</button> <dialog id="my_modal_5" className="$$modal modal-bottom sm:$$modal-middle"> <div className="$$modal-box"> <h3 className="font-bold text-lg">Hello!</h3> <p className="py-4">Press ESC key or click the button below to close</p> <div className="$$modal-action"> <form method="dialog"> {/* if there is a button in form, it will close the modal */} <button className="$$btn">Close</button> </form> </div> </div> </dialog>
{/* Open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_5').showModal()}>open modal</button>
<dialog id="my_modal_5" className="$$modal modal-bottom sm:$$modal-middle">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Press ESC key or click the button below to close</p>
<div className="$$modal-action">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="$$btn">Close</button>
</form>
</div>
</div>
</dialog>
legacy
A hidden checkbox can control the state of modal and labels can toggle the checkbox so we can open/close the modal.
<!-- The button to open modal --> <label for="my_modal_6" class="$$btn">open modal</label> <!-- Put this part before </body> tag --> <input type="checkbox" id="my_modal_6" class="$$modal-toggle" /> <div class="$$modal" role="dialog"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">This modal works with a hidden checkbox!</p> <div class="$$modal-action"> <label for="my_modal_6" class="$$btn">Close!</label> </div> </div> </div>
<!-- The button to open modal -->
<label for="my_modal_6" class="$$btn">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_6" class="$$modal-toggle" />
<div class="$$modal" role="dialog">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">This modal works with a hidden checkbox!</p>
<div class="$$modal-action">
<label for="my_modal_6" class="$$btn">Close!</label>
</div>
</div>
</div>
<!-- The button to open modal --> <label for="my_modal_6" class="$$btn">open modal</label> <!-- Put this part before </body> tag --> <input type="checkbox" id="my_modal_6" class="$$modal-toggle" /> <div class="$$modal" role="dialog"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">This modal works with a hidden checkbox!</p> <div class="$$modal-action"> <label for="my_modal_6" class="$$btn">Close!</label> </div> </div> </div>
<!-- The button to open modal -->
<label for="my_modal_6" class="$$btn">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_6" class="$$modal-toggle" />
<div class="$$modal" role="dialog">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">This modal works with a hidden checkbox!</p>
<div class="$$modal-action">
<label for="my_modal_6" class="$$btn">Close!</label>
</div>
</div>
</div>
<!-- The button to open modal --> <label for="my_modal_7" class="$$btn">open modal</label> <!-- Put this part before </body> tag --> <input type="checkbox" id="my_modal_7" class="$$modal-toggle" /> <div class="$$modal" role="dialog"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">This modal works with a hidden checkbox!</p> </div> <label class="$$modal-backdrop" for="my_modal_7">Close</label> </div>
<!-- The button to open modal -->
<label for="my_modal_7" class="$$btn">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_7" class="$$modal-toggle" />
<div class="$$modal" role="dialog">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">This modal works with a hidden checkbox!</p>
</div>
<label class="$$modal-backdrop" for="my_modal_7">Close</label>
</div>
<!-- The button to open modal --> <label for="my_modal_7" class="$$btn">open modal</label> <!-- Put this part before </body> tag --> <input type="checkbox" id="my_modal_7" class="$$modal-toggle" /> <div class="$$modal" role="dialog"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">This modal works with a hidden checkbox!</p> </div> <label class="$$modal-backdrop" for="my_modal_7">Close</label> </div>
<!-- The button to open modal -->
<label for="my_modal_7" class="$$btn">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_7" class="$$modal-toggle" />
<div class="$$modal" role="dialog">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">This modal works with a hidden checkbox!</p>
</div>
<label class="$$modal-backdrop" for="my_modal_7">Close</label>
</div>
legacy
A link adds a parameter to the URL and you only see the modal when the URL has that parameter
When modal is closed, the page will scroll to the top because of the anchor link.
Anchor links might not work well on some SPA frameworks. If there are problems, use the other methods
<!-- The button to open modal --> <a href="#my_modal_8" class="$$btn">open modal</a> <!-- Put this part before </body> tag --> <div class="$$modal" role="dialog" id="my_modal_8"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">This modal works with anchor links</p> <div class="$$modal-action"> <a href="#" class="$$btn">Yay!</a> </div> </div> </div>
<!-- The button to open modal -->
<a href="#my_modal_8" class="$$btn">open modal</a>
<!-- Put this part before </body> tag -->
<div class="$$modal" role="dialog" id="my_modal_8">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">This modal works with anchor links</p>
<div class="$$modal-action">
<a href="#" class="$$btn">Yay!</a>
</div>
</div>
</div>
<!-- The button to open modal --> <a href="#my_modal_8" class="$$btn">open modal</a> <!-- Put this part before </body> tag --> <div class="$$modal" role="dialog" id="my_modal_8"> <div class="$$modal-box"> <h3 class="text-lg font-bold">Hello!</h3> <p class="py-4">This modal works with anchor links</p> <div class="$$modal-action"> <a href="#" class="$$btn">Yay!</a> </div> </div> </div>
<!-- The button to open modal -->
<a href="#my_modal_8" class="$$btn">open modal</a>
<!-- Put this part before </body> tag -->
<div class="$$modal" role="dialog" id="my_modal_8">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">This modal works with anchor links</p>
<div class="$$modal-action">
<a href="#" class="$$btn">Yay!</a>
</div>
</div>
</div>
This modal works with a hidden checkbox!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!