Automatic Add class and remove it when menu is close or body click to body
Question
Good Morning Honestly Speaking i dont know how to use js properly im starting lo learn from it from school. The code below once you click the menu with the class menuToggle the modal-backdrop adds up. What i want to accomplish is after clicking or closing the menu again the class modal-backdrop will be remove as well.
the code below just ads up the modal-backdrop div and automatic remove after 10sec or more.
$("a.menuToggle").click(function() {
var bd = $('<div class="modal-backdrop"></div>');
bd.appendTo(document.body);
setTimeout(function() {
bd.remove();
}, 10000);
});
2 answers
solution1
0 2017-04-12 19:51:06
Something like this:
$("a.menuToggle").click(function() {
if($('.modal-backdrop').length) {
$(this).removeClass('.modal-backdrop');
} else {
var bd = $('<div class="modal-backdrop"></div>');
bd.appendTo(document.body);
}
});
solution2
0 2017-04-12 20:00:39
There are multiple ways to achieve this, you could use the classList toggle() method to toggle the classes removing opacity or z-index to "hide" the modal.
You could also do it in JS when you create the popup modal before appending it to the interface just set an event listener to remove itself when clicked.
init=()=>{ //SELECT & BIND (CLICK) EVENT document.querySelector('login').addEventListener('click',modal.overlay.init); } modal={ overlay:{ init:()=>{ //CREATE OVERLAY var overlay = document.createElement('overlay'); //SET (CLICK) EVENT TO REMOVE ITSLEF overlay.addEventListener('click',modal.overlay.remove); //APPEND TO INTERFACE document.body.appendChild(overlay); }, remove:(e)=>{ //REMOVE ITSELF e.target.parentNode.removeChild(e.target); } } } //ON DOCUMENT LOAD RUN INIT document.addEventListener('DOMContentLoaded',init);
html{ height: 100%; width: 100%; } html *{ box-sizing: border-box; -webkit-font-smoothing: antialiased; /* DISABLE USER SELECT */ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } body{ z-index: 100; margin: 0 !important; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: -webkit-radial-gradient(#41a3ff,#0273D4); } login{ position: relative; margin: 1em 0 0 0; padding: .25em 1.5em; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #0273D4; border-width: 1px; border-style: solid; border-color: #0273D4; text-transform: capitalize; font-family: Roboto, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } login:hover{ color: white; border-color: white; /* background-color: rgba(255, 255, 255, 0.31); */ -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40); box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40); } login:active{ -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset; } overlay{ position: absolute; top: 0; left: 0; display: flex; height: 100vh; width: 100vw; justify-content: center; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.8); }
<body> <login>click me</login> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.