自动添加课程并在菜单关闭或身体点击正文时将其删除

早安老实说话我不知道如何正确使用js开始从学校学习。下面的代码一旦你点击菜单menuToggle,modal-backdrop加起来。我想要完成的是在再次点击或关闭菜单后，类模式背景也将被删除。自动添加课程并在菜单关闭或身体点击正文时将其删除

下面的代码只是广告模式背景div和自动删除后10秒或更多。

$("a.menuToggle").click(function() { 
    var bd = $('<div class="modal-backdrop"></div>'); 
    bd.appendTo(document.body); 
    setTimeout(function() { 
    bd.remove(); 
    }, 10000); 
});

来源

2017-04-12 techno bisuit

添加HTML，但我会为你提供反正一个例子。 –

欢迎来到StackOverflow，你的问题应该包含一个[最小，完整和可验证的例子]（http://stackoverflow.com/help/mcve）。 – hungerstar

事情是这样的：

$("a.menuToggle").click(function() { 
     if($('.modal-backdrop').length) { 
      $(this).removeClass('.modal-backdrop'); 
     } else { 
      var bd = $('<div class="modal-backdrop"></div>'); 
      bd.appendTo(document.body); 
     } 
    });

来源

2017-04-12 19:51:06 StefanBob

有多种方式来实现这一点，您可以使用classListtoggle()方法来切换删除opacity或z-index“隐藏”的模式类。

在创建弹出窗口模式之前，您还可以在JS中执行此操作，然后再将其附加到界面上，只需设置一个事件侦听器即可在单击时自行删除它。

init=()=>{ 
 
\t //SELECT & BIND (CLICK) EVENT 
 
\t document.querySelector('login').addEventListener('click',modal.overlay.init); 
 
} 
 
modal={ 
 
\t overlay:{ 
 
\t \t init:()=>{ 
 
\t \t \t //CREATE OVERLAY 
 
\t \t \t var overlay = document.createElement('overlay'); 
 
\t \t \t //SET (CLICK) EVENT TO REMOVE ITSLEF 
 
\t \t \t overlay.addEventListener('click',modal.overlay.remove); 
 
\t \t \t //APPEND TO INTERFACE 
 
\t \t \t document.body.appendChild(overlay); 
 
\t \t }, 
 
\t \t remove:(e)=>{ 
 
\t \t \t //REMOVE ITSELF 
 
\t \t \t e.target.parentNode.removeChild(e.target); 
 
\t \t } \t \t 
 
\t } 
 
} 
 

 
//ON DOCUMENT LOAD RUN INIT 
 
document.addEventListener('DOMContentLoaded',init);

html{ 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 
html *{ 
 
\t box-sizing: border-box; 
 
\t -webkit-font-smoothing: antialiased; 
 
\t 
 
/* \t DISABLE USER SELECT */ 
 
\t -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 
body{ 
 
\t z-index: 100; 
 
\t 
 
\t margin: 0 !important; 
 
\t 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t justify-content: center; 
 
\t align-items: center; \t 
 
\t 
 
\t 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{ 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t display: flex; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
}

<body> 
 
\t <login>click me</login> 
 
</body> \t

来源

2017-04-12 20:00:39

完美无瑕，真棒！我只想问一下“只需设置一个事件监听器就可以在点击时自行移除”。如何添加另一个功能，一旦点击它将同时点击另一个切换类'$（function（）{ $（“＃welcomeDivs”）。click（function（）{ $（“。parela”）。toggleClass （'myClass'）; }）; }）;' –

@technobisuit对不起，因为你在上面的评论中发布的代码，它看起来像你选择id＃welcomeDivs并设置一个事件监听器来按类选择一个标签.parela “然后打开和关闭课程，这对我来说很好。 –

您只需在init函数中设置事件侦听器，或者在函数中创建“click”事件绑定的元素。 –

自动添加课程并在菜单关闭或身体点击正文时将其删除

回答

相关问题