Use modal dialogs to ask for information that, when provided, could significantly lessen users' work or effort. Modals can work effectively when the information being requested or presented is relevant or can streamline the completion of the current task.
| <div class="popup center"> | |
| <div class="icon"> | |
| <i class="fa fa-check"></i> | |
| </div> | |
| <div class="title">Success!!</div> | |
| <div class="description"> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias nihil | |
| provident voluptatem nulla placeat | |
| </div> | |
| <div class="btn-div"> | |
| <div class="dismiss-btn"> | |
| <button id="dismiss-popup-btn">Dismiss</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom-right"> | |
| <button id="open-popup-btn">Open Popup</button> | |
| </div> |
| document.getElementById("open-popup-btn").addEventListener("click",function(){ | |
| document.getElementById("open-popup-btn").style.display = "none"; | |
| document.getElementsByClassName("popup")[0].classList.add("activeModal"); | |
| }); | |
| document.getElementById("dismiss-popup-btn").addEventListener("click",function(){ | |
| document.getElementById("open-popup-btn").style.display = "block"; | |
| document.getElementsByClassName("popup")[0].classList.remove("activeModal"); | |
| }); |