JS实现可移动模态框-前端开发

实现可移动模态框通常需要使用JS库，如jQuery和Bootstrap等，这里以jQuery为例进行讲解。

实现可移动模态框通常需要使用JS库，如jQuery和Bootstrap等，这里以jQuery为例进行讲解。

1. 引入jQuery库

首先需要引入jQuery库文件，可以通过CDN链接或本地文件引入，如：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

2. HTML结构

接下来创建HTML结构，包括模态框的外层

元素和内部的

和

元素。其中，

用于显示标题，

用于显示内容，

用于显示操作按钮，如：

<div class="modal">
   <div class="modal-dialog">
      <div class="modal-content">
         <header class="modal-header">
            <h3 class="modal-title">Modal Title</h3>
            <button class="close">×</button>
         </header>
         <section class="modal-body">
            Modal Content
         </section>
         <footer class="modal-footer">
            <button class="btn btn-primary">Save changes</button>
            <button class="btn btn-secondary">Close</button>
         </footer>
      </div>
  </div>
</div>

3. 添加CSS样式

为了让模态框能够弹出并实现移动，需要为模态框添加相关的CSS样式代码。首先为模态框添加基础样式，如：

.modal {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   z-index: 9999;
}

.modal .modal-dialog {
   width: 80%;
   height: 80%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.modal .modal-content {
   flex: 1;
   overflow: auto;
   padding: 20px;
}

.modal .modal-header, .modal .modal-footer {
   padding: 10px 20px;
   background-color: #f7f7f7;
   border-bottom: 2px solid #dcdcdc;
}

.modal .modal-header h3 {
   display: inline-block;
   margin: 0;
}

.modal .modal-header .close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 18px;
   line-height: 1;
   color: #000;
}

然后为模态框添加移动相关样式，如：

.modal .modal-header {
   cursor: move;
}

.draggable-modal {
   position: absolute!important;
}

4. 添加JS代码

最后就是添加JS代码，使得模态框可以弹出并移动。代码中需要使用jQuery库的相关函数和事件来实现，如：

$(function() {
   var $modal = $('.modal');
   var $dialog = $('.modal-dialog');
   var $header = $('.modal-header');

   // 弹出模态框
   $('#show-modal').on('click', function() {
       $modal.fadeIn();
   });

   // 关闭模态框
   $modal.on('click', '.close', function() {
       $modal.fadeOut();
   });

   // 拖动模态框
   $header.on('mousedown', function(event) {
       var offsetX = event.clientX - $dialog.offset().left;
       var offsetY = event.clientY - $dialog.offset().top;
       $dialog.addClass('draggable-modal');
       $dialog.on('mousemove', function(event) {
           var left = event.clientX - offsetX;
           var top = event.clientY - offsetY;
           if (left < 0) {
               left = 0;
           }
           if (top < 0) {
               top = 0;
           }
           if (left + $dialog.outerWidth() > $(window).innerWidth()) {
               left = $(window).innerWidth() - $dialog.outerWidth();
           }
           if (top + $dialog.outerHeight() > $(window).innerHeight()) {
               top = $(window).innerHeight() - $dialog.outerHeight();
           }
           $dialog.css({
               left: left,
               top: top
           });
       });
       $dialog.on('mouseup', function() {
           $dialog.removeClass('draggable-modal');
           $dialog.off('mousemove');
       });
   });
});

以上就是JS实现可移动模态框的完整攻略，下面会通过两个示例进一步说明。

示例1

这个示例中我们假设有一个简单的登录框，其中包含账号输入框、密码输入框和登录按钮，需要调整登录框的位置。代码实现步骤如下：

创建HTML结构，包括模态框的外层
元素和内部的

,

和

元素
添加CSS样式，包括基础样式和移动相关样式
添加JS代码，实现模态框的弹出和移动功能

完整代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>可移动模态框</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <button type="button" class="btn btn-primary" id="show-modal">打开模态框</button>
   <div class="modal">
      <div class="modal-dialog">
         <div class="modal-content">
            <header class="modal-header">
               <h3 class="modal-title">登录框</h3>
               <button class="close">×</button>
            </header>
            <section class="modal-body">
               <div class="form-group">
                  <label for="username">账号：</label>
                  <input type="text" class="form-control" id="username" placeholder="请输入账号">
               </div>
               <div class="form-group">
                  <label for="password">密码：</label>
                  <input type="password" class="form-control" id="password" placeholder="请输入密码">
               </div>
            </section>
            <footer class="modal-footer">
               <button class="btn btn-primary">登录</button>
               <button class="btn btn-secondary">取消</button>
            </footer>
         </div>
      </div>
   </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</html>

CSS：

.modal {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   z-index: 9999;
}

.modal .modal-dialog {
   width: 400px;
   height: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.modal .modal-content {
   flex: 1;
   overflow: auto;
   padding: 20px;
}

.modal .modal-header, .modal .modal-footer {
   padding: 10px 20px;
   background-color: #f7f7f7;
   border-bottom: 2px solid #dcdcdc;
}

.modal .modal-header h3 {
   display: inline-block;
   margin: 0;
}

.modal .modal-header .close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 18px;
   line-height: 1;
   color: #000;
}

.modal .modal-header {
   cursor: move;
}

.draggable-modal {
   position: absolute!important;
}

JS：

$(function() {
   var $modal = $('.modal');
   var $dialog = $('.modal-dialog');
   var $header = $('.modal-header');

   // 弹出模态框
   $('#show-modal').on('click', function() {
       $modal.fadeIn();
   });

   // 关闭模态框
   $modal.on('click', '.close', function() {
       $modal.fadeOut();
   });

   // 拖动模态框
   $header.on('mousedown', function(event) {
       var offsetX = event.clientX - $dialog.offset().left;
       var offsetY = event.clientY - $dialog.offset().top;
       $dialog.addClass('draggable-modal');
       $dialog.on('mousemove', function(event) {
           var left = event.clientX - offsetX;
           var top = event.clientY - offsetY;
           if (left < 0) {
               left = 0;
           }
           if (top < 0) {
               top = 0;
           }
           if (left + $dialog.outerWidth() > $(window).innerWidth()) {
               left = $(window).innerWidth() - $dialog.outerWidth();
           }
           if (top + $dialog.outerHeight() > $(window).innerHeight()) {
               top = $(window).innerHeight() - $dialog.outerHeight();
           }
           $dialog.css({
               left: left,
               top: top
           });
       });
       $dialog.on('mouseup', function() {
           $dialog.removeClass('draggable-modal');
           $dialog.off('mousemove');
       });
   });
});

示例2

这个示例中我们假设有一个图片展示模态框，其中包含图片元素和关闭按钮，需要调整模态框的位置。该示例通过模态框内嵌Bootstrap的carousel组件实现图片轮播，代码实现步骤如下：

创建HTML结构，包括模态框的外层
元素和内部的

,

和

元素
添加CSS样式，包括基础样式和移动相关样式
添加JS代码，实现模态框的弹出和移动功能，和调用carousel组件实现图片轮播

完整代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>可移动模态框</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <button type="button" class="btn btn-primary" id="show-modal">打开模态框</button>
   <div class="modal">
      <div class="modal-dialog">
         <div class="modal-content">
            <header class="modal-header">
               <h3 class="modal-title">轮播图</h3>
               <button class="close">×</button>
            </header>
            <section class="modal-body">
               <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  </ol>
                  <div class="carousel-inner">
                     <div class="carousel-item active">
                        <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2017/02/24/03/43/nine-2091336_960_720.jpg" alt="First slide">
                     </div>
                     <div class="carousel-item">
                        <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2015/06/19/20/13/sunset-815270_960_720.jpg" alt="Second slide">
                     </div>
                     <div class="carousel-item">
                        <img class="d-block w-100" src="https://cdn.pixabay.com/photo/2019/03/05/10/09/provence-4039682_960_720.jpg" alt="Third slide">
                     </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                     <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
                     <span class="sr-only">Next</span>
                  </a>
               </div>
            </section>
            <footer class="modal-footer">
               <button class="btn btn-secondary">关闭</button>
            </footer>
         </div>
      </div>
   </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</html>

CSS：

.modal {
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   z-index: 9999;
}

.modal .modal-dialog {
   width: 80%;
   height: 80%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.modal .modal-content {
   flex: 1;
   overflow: auto;
   padding: 20px;
}

.modal .modal-header, .modal .modal-footer {
   padding: 10px 20px;
   background-color: #f7f7f7;
   border-bottom: 2px solid #dcdcdc;
}

.modal .modal-header h3 {
   display: inline-block;
   margin: 0;
}

.modal .modal-header .close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 18px;
   line-height: 1;
   color: #000;
}

.modal .modal-header {
   cursor: move;
}

.draggable-modal {
   position: absolute!important;
}

JS：

$(function() {
   var $modal = $('.modal');
   var $dialog = $('.modal-dialog');
   var $header = $('.modal-header');

   // 弹出模态框
   $('#show-modal').on('click', function() {
       $modal.fadeIn();
   });

   // 关闭模态框
   $modal.on('click', '.close, .btn-secondary', function() {
       $modal.fadeOut();
       $('#carouselExampleIndicators').carousel('pause');
   });

   // 拖动模态框
   $header.on('mousedown', function(event) {
       var offsetX = event.clientX - $dialog.offset().left;
       var offsetY = event.clientY - $dialog.offset().top;
       $dialog.addClass('draggable-modal');
       $dialog.on('mousemove', function(event) {
           var left = event.clientX - offsetX;
           var top = event.clientY - offsetY;
           if (left < 0) {
               left = 0;
           }
           if (top < 0) {
               top = 0;
           }
           if (left + $dialog.outerWidth() > $(window).innerWidth()) {
               left = $(window).innerWidth() - $dialog.outerWidth();
           }
           if (top + $dialog.outerHeight() > $(window).innerHeight()) {
               top = $(window).innerHeight() - $dialog.outerHeight();
           }
           $dialog.css({
               left: left,
               top: top
           });
       });
       $dialog.on('mouseup', function() {
           $dialog.removeClass('draggable-modal');
           $dialog.off('mousemove');
       });
   });

   // 轮播图
   $('#carouselExampleIndicators').carousel({
       interval: 2000,
       pause: 'hover'
   });
});