Question

我创建了一个div，它出现在带动画的按钮上。但是当我试图用动画关闭它时。没有发生任何事情。它很简单就关闭了。

这是我小提琴的链接：https://fiddle.jshell.net/4o669azn/4/

请帮忙

Answer 1

改变旧：

span.onclick = function() {z
    modal.style.display = "none";
    modal1.style.display='none';
}

致：

span.onclick = function() {
    $(".modal").slideUp("slow");
    $(".modal1").slideUp("slow");
}

因此你需要包含jQuery。

Answer 2

以下是纯HTML5和CSS3互动模式！ - 无Javascript！

JSFiddle

网页设计的未来只是在没有JS的情况下你现在可以做的所有这些新事物！所以这可以通过创建input checkboxes来工作作为切换。使用label属性将for=附加到他们身上。这些将充当您的buttons然后将您的复选框放在代码中的任意位置，并为其提供CSS值display:none;。这将隐藏它们，非常宝贵的事实是它们仍然会起作用，因为你附加了label标记，它们将作为button来检查它们。
您现在可以对:checked的输入复选框伪类进行CSS规则，并将不同的CSS选择器链接到它们，以便在整个HTML文档树中的任何元素上作用！这使您能够创建 AMAZING 和看似无限的UI体验，无需JS！

对于模态的关闭按钮，我将它们变成了一个简单的form button标记为type="reset"然后将原始顶部label附加到其中一个使用表单属性的表单所以当你点击2个重置按钮中的任何一个时，它会将它们全部发送回＆＃34; unchecked＆＃34;状态因此 - 过渡逆转到最初！是的，取消了动画并改为使用过渡。他们是最终确定它的诀窍！并让动画轻松恢复到复选框上的初始状态，以便再次取消选中。至少减少了50％的代码！

我会留下最终造型细节。

＆＃13;

#myBtn {
  border: 1px solid black;
}

#modal-toggle,
#modal1-toggle {
  display: none;
}

#modal-toggle:checked ~ .modal,
#modal1-toggle:checked ~ .modal1 {
  visibility: visible;
  position: fixed;
}

#modal-toggle:checked ~ .modal > .modal-content,
#modal1-toggle:checked ~ .modal1 > .modal-content1 {
  top: 0;
  left: 0;
  opacity: 1;
}

.modal {
  visibility: hidden;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  
  /* Location of the box */
  top: 20%;
  width: 50%;
  /* Full width */
  height: 70%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  border: 1px solid transparent;
}


/* Modal Content */

.modal-content {
  position: relative;
  top: -300px;
  opacity: 0;
  margin: auto;
  background: white;
  border: 1px solid #888;
  width: 80%;
  transition: all 0.4s linear;
}


/* The Close Button */

.close {
  color: white;
  position: relative;
  float: right;
  display: block;
  font-size: 20px;
  font-weight: bold;
}



.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 0 16px;
  display: block;
  background-color: #5cb85c;
  color: white;
  overflow: hidden;
  
}

.modal-body {
  padding: 2px 16px;
  height: 200px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  height: 50px;
  text-align: left;
}

.modal1 {
  visibility: hidden;
  /* Hidden by default */
  position: absolute;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  
  /* Location of the box */
  top: 20%;
  left: 39em;
  width: 30%;
  /* Full width */
  height: 70%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  border: 1px solid transparent;
}


/* Modal Content */

.modal-content1 {
  position: relative;
  
  left: -650px;
  opacity: 0;
  margin: auto;
  background: white;
  border: 1px solid #888;
  width: 80%;
  transition: all 0.4s linear;
}






/* The Close Button */

.close1 {
  color: white;
  float: right;
  
  font-weight: bold;
}



.close1:hover,
.close1:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



.modal-header1 {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  height: 30px;
}

.modal-body1 {
  padding: 2px 16px;
  height: 200px;
}

.modal-footer1 {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
  height: 50px;
}

＆＃13;

<label id='myBtn' for="modal-toggle">
  pressme
</label>
<input id="modal-toggle" form="close-out1" type="checkbox">
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <form id="close-out1">
        <button form="close-out1" type="reset" class="close">&times;</button>
      </form>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <label for="modal1-toggle" class=" btn btn-default" id='myBtn1'>Priority</label>
    </div>
  </div>

</div>
<input id="modal1-toggle" form="close-out2" type="checkbox">
<div id="myModal1" class="modal1">

  <!-- Modal content -->
  <div class="modal-content1">
    <div class="modal-header1">
      <form id="close-out2">
        <button type="reset" form="close-out2">&times;</button>
      </form>
    </div>

    <div class="modal-body1">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer1">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>

＆＃13;

无法为关闭按钮设置动画

2 个答案: