Question

我从JS开始，我想使关闭按钮关闭此代码上的div .popup1：

<div class='popup1' id="popup1">
  <div class="container">
    <div class="row rowpopup">
      <div class="iconpopup">
        <img class="imgpopup" src="" />
      </div>
      <div class="textpopup">
        <div class="textpopup1">

        </div>
        <div class="textpopup2">

        </div>
      </div>
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

我猜最好的选择是使关闭按钮在单击时调用一个函数，该函数添加带有显示的类：无，对吗？单击关闭按钮时，我还想添加一个淡入淡出过渡。

该怎么做？还有其他更好的选择吗？

Answer 1

没错，一个应用类的函数将在您要查找的情况下起作用，在这种情况下，您可以具有一个在单击关闭按钮时应用类的函数，例如：

var popupEl = document.querySelector( '. popup1' );
var button = document.querySelector( '.close' );

button.addEventListener( 'click', function() {
   popupEl.classList.add( 'closed' );
});

因此您的DOM会变成类似以下内容：

<div class='popup1 closed' id="popup1">
....

从这种意义上讲，您可以使用不透明度来隐藏元素并将其应用到元素中，例如：

.popup {
   opacity: 1;
   transition: opacity 0.5s ease-out;
}

.closed {
   opacity: 0;
}

最后一件事是，这将使元素仅具有隐藏的不透明性才可见，为了将其从DOM中删除或完全隐藏，您可以使用transitionend来完成不透明性转换，例如：

popupEl.addEventListener( 'transitionend', function(){
   popupEl.classList.add( 'removed ');
});

// css
.removed {
   display: none;
}

请注意，transitionend会在两个方向上运行，这意味着在closed上应用或删除了removed，因此您需要确保仅在closed上应用popupEl.addEventListener( 'transitionend', function(){ if( popupEl.classList.contains( 'closed' ) ) { popupEl.classList.add( 'removed '); } });类类出现在元素上，例如：

{{1}}

如何使用JavaScript制作关闭按钮？

1 个答案: