[jquery]弹框，遮罩层

haliofwu

于 2017-12-18 14:57:42 发布

阅读量525

点赞数

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/xixi880928/article/details/78833113

版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种自定义弹框组件的设计与实现方法，该组件兼容原有系统，并具备遮罩层、可拖动及自定义内容等功能。通过使用jQuery UI的draggable特性，实现了弹框的拖动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。
所以自己必须要写一个自己的弹框以达到目的：
这里写图片描述

需要满足：
1.兼容原系统
2.点击弹框背景变灰，背景功能不可点击（形成一个遮罩层）
3.点击弹框头部进行拖动
5.弹框内部自定义

实现方案：
参照Jquery-ui.用draggble即可。
弹框弹出时：

  .遮罩层{
      z-index: 1001;//放置在其他元素的最上层即可实现遮罩功能
      background-color: #ccc;
      bottom: 0;
      top: 0;
      right: 0;
      overflow: auto;
      position: fixed;
      width: 100%;

    }