Question

我有一个JS功能，当你点击一个按钮显示一个弹出div并隐藏按钮时，当你关闭弹出div时，按钮会再次显示。

在我的示例中，我有3个按钮，我现在想要的是隐藏所有按钮，当它的相应弹出窗口可见时，当你关闭它时，所有按钮再次可见。

谢谢！

更新

我实际上需要超过3个按钮

JS功能

function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}

Answer 1

如果你只需要这3个按钮，就这样做：

function show(targets) {
  var len = targets.length,
      i = 0;
  for (i = 0; i < len; i += 1) {
      document.getElementById(targets[i]).style.display = 'block';
    }
}
function hide(targets) {
  var len = targets.length,
      i = 0;
  for (i = 0; i < len; i += 1) {
      document.getElementById(targets[i]).style.display = 'none';
    }
}

body {
    background:#fff;
    padding:0;
    margin:0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight:400;
    font-style:normal;
    line-height:1.2;
    position:relative;
    cursor:default;
    -moz-font-smoothing:antialiased;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
}
a {
    color:#fff;
    text-decoration:none;
}
h1 {
    color:#fff;
}
#wrapper, #wrapper2, #wrapper3 {
    width: 100%;
    overflow: hidden;
    left: 100px;
    top: 100px;
    position: absolute;
    z-index: 200;
    display:none;
}
#wrapper2 {
    top: 300px;
}
#wrapper3 {
    top: 300px;
}
#container {
    margin-left: auto;
    margin-right: auto;
}
#content, #content2, #content3 {
    width: 70%;
    padding: 20px;
    background: #0076FC;
}
#content2 {
    background: #D8266A;
}
#content3 {
    background: #E88B10;
}
#button1 a, #button2 a, #button3 a {
    background: #0076FC;
    padding: 10px;
    line-height: 30px;
    overflow: hidden;
    display: inline-block;
}
#button2 a {
    background: #D8266A;
}
#button3 a {
    background: #E88B10;
}

<div id="button1" > <a href="#" onclick="show(['wrapper']);hide(['button1','button2','button3'])">Button 1</a> </div>
<div id="wrapper">
  <div id="container">
    <div id="content">
      <h1>Here's The Popup!</h1>
      <a href="#" onclick="hide(['wrapper']);show(['button1','button2','button3'])">Close</a> </div>
  </div>
</div>
<div id="button2" > <a href="#" onclick="show(['wrapper2']);hide(['button1','button2','button3'])">Button 2</a> </div>
<div id="wrapper2">
  <div id="container">
    <div id="content2">
      <h1>Here's The Popup!</h1>
      <a href="#" onclick="hide(['wrapper2']);show(['button1','button2','button3'])">Close</a> </div>
  </div>
</div>
<div id="button3"> <a href="#" onclick="show(['wrapper3']);hide(['button1','button2','button3'])">Button 3</a> </div>
<div id="wrapper3">
  <div id="container">
    <div id="content3">
      <h1>Here's The Popup!</h1>
      <a href="#" onclick="hide(['wrapper3']);show(['button1','button2','button3'])">Close</a> </div>
  </div>

如果您需要更多，我建议使用类似JQuery和类的东西：

function show(targets) {
  $(targets).css("display","block");
}
function hide(targets) {
  $(targets).css("display","none");
}

body {
    background:#fff;
    padding:0;
    margin:0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight:400;
    font-style:normal;
    line-height:1.2;
    position:relative;
    cursor:default;
    -moz-font-smoothing:antialiased;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
}
a {
    color:#fff;
    text-decoration:none;
}
h1 {
    color:#fff;
}
#wrapper, #wrapper2, #wrapper3 {
    width: 100%;
    overflow: hidden;
    left: 100px;
    top: 100px;
    position: absolute;
    z-index: 200;
    display:none;
}
#wrapper2 {
    top: 300px;
}
#wrapper3 {
    top: 300px;
}
#container {
    margin-left: auto;
    margin-right: auto;
}
#content, #content2, #content3 {
    width: 70%;
    padding: 20px;
    background: #0076FC;
}
#content2 {
    background: #D8266A;
}
#content3 {
    background: #E88B10;
}
#button1 a, #button2 a, #button3 a {
    background: #0076FC;
    padding: 10px;
    line-height: 30px;
    overflow: hidden;
    display: inline-block;
}
#button2 a {
    background: #D8266A;
}
#button3 a {
    background: #E88B10;
}

<div id="button1" class="button" > <a href="#" onclick="show('#wrapper');hide('.button')">Button 1</a> </div>
<div id="wrapper">
  <div id="container">
    <div id="content">
      <h1>Here's The Popup!</h1>
      <a href="#" onclick="hide('#wrapper');show('.button')">Close</a> </div>
  </div>
</div>
<div id="button2"  class="button" > <a href="#" onclick="show('#wrapper2');hide('.button')">Button 2</a> </div>
<div id="wrapper2">
  <div id="container">
    <div id="content2">
      <h1>Here's The Popup!</h1>
      <a href="#" onclick="hide('#wrapper2');show('.button')">Close</a> </div>
  </div>
</div>
<div id="button3" class="button" > <a href="#" onclick="show('#wrapper3');hide('.button')">Button 3</a> </div>
<div id="wrapper3">
  <div id="container">
    <div id="content3">
      <h1>Here's The Popup!</h1>
      <a href="#" onclick="hide('#wrapper3');show('.button')">Close</a> </div>
  </div>

单击时隐藏按钮

1 个答案: