Modals are very commonly used on the web, when you might want to show some additional content without leaving the page, for example, showing a login form. If you’re trying to add one to your website, check out these examples.
This jQuery plugin is very simple to use, so you can be up and running in minutes. If you want to quickly add a modal to your site, this is a great option.
To install the plugin, simply add the following to the head tag of your document:
<!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <!-- jQuery Modal --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
And to use it:
<!-- Modal HTML embedded directly into document --> <div id="ex1" class="modal"> <p>Thanks for clicking. That felt good.</p> <a href="#" rel="modal:close">Close</a> </div> <!-- Link to open the modal --> <p><a href="#ex1" rel="modal:open">Open Modal</a></p>
Without using any libraries:
Looking to understand better how modals work, or just want something lightweight and custom? W3Schools has a great example of how to build a modal from scratch.