主页 / 问题 / 1610858
Accepted
Dina
Asked:2025-04-26 19:52:55 +0000 UTC2025-04-26 19:52:55 +0000 UTC

如何通过滑动关闭模式窗口？

  • 772

我怎样才能做出这样的模态窗口关闭效果？使用materialize codepen.io作为示例

在此处输入图片描述

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>
css

1 个回答

  1. Best Answer

    显然， /libs/ materialize/1.0.0/css/materialize.min.css 中没有用于模态窗口滑动的单独类，因此您可能需要自己实现此行为，例如使用js类似以下内容：

    document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems, {});

  var modalElement = document.getElementById('modal1');
  var modalInstance = M.Modal.getInstance(modalElement);
  var modalContent = modalElement.querySelector('.modal-content');

  var startY = 0;
  var currentY = 0;
  var deltaY = 0;
  var isDragging = false;
  var swipeThreshold = 75;

  function handleDragStart(event) {
    if (modalContent.scrollTop !== 0) {
      isDragging = false;
      return;
    }

    if (event.type === 'mousedown') {
      if (event.button !== 0) return;
      event.preventDefault();
      startY = event.clientY;
    } else if (event.type === 'touchstart') {
      startY = event.touches[0].clientY;
    } else {
      return;
    }

    isDragging = true;
    modalElement.classList.add('swiping');
    currentY = startY;
    deltaY = 0;
  }

  function handleDragMove(event) {
    if (!isDragging) return;

    if (event.type === 'mousemove') {
      currentY = event.clientY;
    } else if (event.type === 'touchmove') {
      currentY = event.touches[0].clientY;
    } else {
      return;
    }

    deltaY = currentY - startY;

    if (deltaY > 0) {
      modalElement.style.transform = `translateY(${deltaY}px)`;
    } else {
      modalElement.style.transform = 'translateY(0px)';
    }
  }

  function handleDragEnd(event) {
    if (!isDragging) return;

    isDragging = false;
    modalElement.classList.remove('swiping');
    modalElement.style.transform = 'translateY(0px)';

    if (deltaY > swipeThreshold) {
      modalInstance.close();
    }

    startY = 0;
    currentY = 0;
    deltaY = 0;
  }

  modalElement.addEventListener('touchstart', handleDragStart, {
    passive: true
  });
  document.addEventListener('touchmove', handleDragMove, {
    passive: true
  });
  document.addEventListener('touchend', handleDragEnd);

  modalElement.addEventListener('mousedown', handleDragStart);
  document.addEventListener('mousemove', handleDragMove);
  document.addEventListener('mouseup', handleDragEnd);

});
    body {
  padding: 20px;
}

#modal1.swiping {
  transition: none;
  user-select: none;
}

#modal1 {
  cursor: grab;
}

#modal1.swiping {
  cursor: grabbing;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Materialize. Закрытие модального окна свайпом/мышью</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
  </style>
</head>

<body>

  <h1>Демо: Закрытие окна свайпом/перетаскиванием вниз</h1>

  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Открыть окно (Bottom Sheet)</a>

  <div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>Заголовок окна</h4>
      <p>Попробуйте свайпнуть (провести пальцем) или перетащить мышью вниз по этому окну, чтобы закрыть его.</p>
      <p>Немного текста...</p>
      <p>Еще немного текста...</p>
      <p>И еще, чтобы контент можно было скроллить...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p>Конец контента.</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Кнопка закрытия</a>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


</body>

</html>

    • 2

相关问题