1. Python技术站首页
  2. css

JS实现可移动模态框

• css
yizhihongxing

实现可移动模态框通常需要使用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

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

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

    ,

    和

    元素
  2. 添加CSS样式，包括基础样式和移动相关样式
  3. 添加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组件实现图片轮播，代码实现步骤如下：

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

    ,

    和

    元素
  2. 添加CSS样式，包括基础样式和移动相关样式
  3. 添加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'
   });
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现可移动模态框 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JS+CSS实现超漂亮的动态翻书效果(思路详解)

    关于“JS+CSS实现超漂亮的动态翻书效果(思路详解)”这个主题，以下是完整的攻略： 1. 确定需求 在进行任何前端交互设计之前，首要的步骤是确定需求，明确实现动态翻书效果的功能需求是什么。 假设我们的要求是：能够鼠标拖拽或点击翻书按钮来实现页面翻转效果。 2. 搭建基本页面结构 为了实现翻书效果，我们需要将页面分成左右两部分，并在两个页面之间设置转轴线来“…

    css 2023年6月9日
    00

  • table不让td文字溢出操作方法

    在 HTML 中，table 是非常重要的元素，但是当 td 中的文字过长时，通常会导致 td 与其他元素重叠，影响前端的美观和用户体验。为了不让 td 中的文字溢出，有以下两种常见的操作方法： 方法一：使用 CSS 样式实现 td 中文字不溢出 选择需要限制文字溢出的 td 元素，声明样式 overflow 为 hidden。 td { overflow:…

    css 2023年6月9日
    00

  • 浏览器实现移动端高性能css3动画(开启gpu加速)

    我们来详细讲解一下浏览器实现移动端高性能CSS3动画的完整攻略。 开启GPU加速的原因 众所周知，移动端设备的CPU性能相对于桌面端还是有很大差距的，而且移动设备的屏幕分辨率也普遍比较高，为了保证在移动设备上实现高质量的动画效果，我们就需要利用GPU的加速能力，从而实现流畅的CSS3动画。 如何开启GPU加速 在CSS样式中添加 translate3d 或 …

    css 2023年6月9日
    00

  • css3动画效果小结(推荐)

    对于“css3动画效果小结(推荐)”这一话题，以下是详细的攻略： 1. 前置知识 在学习和实践 CSS3 动画效果之前，需要掌握一些基本的前端知识，包括但不限于： HTML 和 CSS 的基本语法和使用方法 DOM 结构和节点的概念 CSS 中的选择器和优先级 CSS 盒模型和布局 CSS3 中新特性的概念和用法 同时也需要了解一些与动画相关的 CSS 属性…

    css 2023年6月9日
    00

  • 常用的正则表达式实例整理

    针对“常用的正则表达式实例整理”，我会从以下几个方面来详细讲解： 什么是正则表达式？ 常用的正则表达式实例整理 示例说明 如何测试正则表达式的匹配效果？ 什么是正则表达式？ 正则表达式是用于模式匹配的一个工具，它可以在文本中搜索指定的模式并进行各种操作。使用正则表达式可以快速检索文本，替换文本中的一些特定内容，或者验证表单的输入等等。 常用的正则表达式实例整…

    css 2023年6月9日
    00

  • vue 1.0 结合animate.css定义动画效果

    下面是“vue 1.0 结合animate.css定义动画效果”的完整攻略： 1. 安装animate.css 首先需要安装animate.css，可以通过npm或者cdn方式引入： NPM 安装 npm install animate.css –save CDN 引入 <link rel="stylesheet" href=&q…

    css 2023年6月10日
    00

  • 详解能在多种前端框架下使用的表格控件

    详解能在多种前端框架下使用的表格控件 背景和简介 在前端开发中，表格控件是非常常见的一种UI组件，实现复杂度也相对较高。但是，正是因为其常见和复杂的特性，所以有必要寻找一种能在多种前端框架下使用的表格控件，这样能够大幅减少重复的工作量和时间成本。 在我们的攻略中，我们将介绍如何使用一个名为”Ag-Grid Community Edition”的表格控件，它能…

    css 2023年6月10日
    00

  • php程序员应具有的7种能力小结

    PHP是一种流行的服务器端编程语言，具有广泛的应用和使用场景。在PHP程序员的职业生涯中，他们需要具备一定的技能和能力，才能提高代码质量、提高工作效率等。下面就是“php程序员应具有的7种能力小结”的详细攻略。 1. 代码质量控制能力 PHP程序员要能写出高质量的代码，避免出现重复无用的代码，提高代码可维护性和可扩展性。因此，他们应当熟悉编程规范、注释规范、…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部