Question

早安老实说话我不知道如何正确地使用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);
});

Answer 1

这样的事情：

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

Answer 2

有多种方法可以实现此目的，您可以使用classList toggle()方法将删除opacity或z-index的类切换为＆＃34;隐藏＆＃34 ;模态。

在创建弹出模式之前，您也可以在JS中将其添加到界面中，只需设置一个事件侦听器，以便在单击时自行删除。

＆＃13;

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);

＆＃13;

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);
}

＆＃13;

<body>
	<login>click me</login>
</body>

＆＃13;

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

2 个答案: