Author: | ekrof |
---|---|
Views Total: | 25,563 views |
Official Page: | Go to website |
Last Update: | May 18, 2016 |
License: | MIT |
Preview:

Description:
A simple, responsive modal dialog built using CSS and html checkbox.
How to use it:
Create the modal dialog with a toggle button on the webpage.
<div class="modal-container"> <input id="modal-toggle" type="checkbox"> <button>Click me</button> <div class="modal-backdrop"> <div class="modal-content"> <label class="modal-close" for="modal-toggle">x</label> <h2>Modal title</h2> <hr /> <p>Modal Content</p> <label class="modal-close button" for="modal-toggle">Close</label> </div> </div> </div>
The primary CSS styles.
.modal-container { margin: 0 auto; padding-top: 60px; position: relative; width: 160px; } .modal-container button { display: block; margin: 0 auto; color: #fff; width: 160px; height: 50px; line-height: 50px; background: #446CB3; font-size: 22px; border: 0; border-radius: 3px; box-shadow: 0 5px 5px -5px #333; transition: background 0.3s ease-in; } .modal-container .modal-backdrop { height: 0; width: 0; opacity: 0; overflow: hidden; transition: opacity 0.2s ease-in; } .modal-container #modal-toggle { position: absolute; left: 0; top: 0; height: 100%; width: 100%; margin: 0; opacity: 0; cursor: pointer; }
The CSS tricks to toggle the modal dialog.
.modal-container #modal-toggle:hover ~ button { background: #1E824C; } .modal-container #modal-toggle:checked { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9; opacity: 0; } .modal-container #modal-toggle:checked ~ .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; opacity: 1; } .modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content { background-color: #fff; max-width: 400px; width: 100%; height: 280px; padding: 10px 30px; position: absolute; left: calc(50% - 200px); top: 12%; border-radius: 4px; z-index: 999; pointer-events: auto; cursor: auto; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6); } @media (max-width: 400px) { .modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content { left: 0; } } .modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close { color: #666; position: absolute; right: 2px; top: 0; padding-top: 7px; background: #fff; font-size: 16px; width: 25px; height: 28px; font-weight: bold; text-align: center; cursor: pointer; } .modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button { top: initial; bottom: 20px; right: 20px; background: #4CAF50; color: #fff; width: 50px; border-radius: 2px; font-size: 14px; font-weight: normal; } .modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close.button:hover { color: #fff; background: #1E824C; } .modal-container #modal-toggle:checked ~ .modal-backdrop .modal-content .modal-close:hover { color: #333; }
How can i adding drag&drop feature?
Excelent !!!! thanks !