首页 > 解决方案 > 将项目从模态拖到页面上

问题描述

是否可以将项目从 jquery 模式弹出窗口拖到页面上。

我使用的模态是我在 codepen 上找到的基本模态:https ://codepen.io/brandonb927/pen/wJaIi

html

    <div class="wrapper">
    <h1>Simple jQuery Modal</h1>
    <button class="modal-toggle">Show modal</button>
  </div>

  <div class="modal">
    <div class="modal-overlay modal-toggle"></div>
    <div class="modal-wrapper modal-transition">
      <div class="modal-header">
        <button class="modal-close modal-toggle"><svg class="icon-close icon" viewBox="0 0 32 32"><use xlink:href="#icon-close"></use></svg></button>
               <h2 class="modal-heading">This is a modal</h2>
          </div>

      <div class="modal-body">
        <div class="modal-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
          <button class="modal-toggle">Update</button>
        </div>
      </div>
    </div>
  </div>

jQuery

$('.modal-toggle').on('click', function(e) {
  e.preventDefault();
  $('.modal').toggleClass('is-visible');
});

标签: jqueryhtml

解决方案


推荐阅读