jQuery点击拖动滑动弹出层代码



139 553 185



特效描述:jQuery 点击拖动滑动 弹出层代码,jQuery滑动弹出层,拖动弹出层代码

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popup.js"></script>

2. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * { margin: 0; padding: 0; }
    body { font-family: "Microsoft Yahei"; font-size: 16px; }
    #mask_shadow {
      display: none;
      opacity: 0;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
    }
    #popup {
      display: none;
      opacity: 0; 
      position: absolute;
      z-index: 2;
      top: 150px;
      width: 600px;
      height: 190px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
    #popup .title {
      position: relative;
      width: 100%;
      height: 55px;
      background-color: #5bc0de;
      cursor: move;
    }
    #popup .title p {
      padding-left: 14px;
      line-height: 55px;
      color: #fff;
    }
    #popup .title span {
      position: absolute;
      top: 12px;
      right: 20px;
      width: 30px;
      height: 30px;
      color: #000;
      opacity: .2;
      font-size: 21px;
      cursor: pointer;
      text-align: center;
      border: 1px solid #333;
    }
    #popup .title span:hover {
      opacity: .8;
    }
    #popup .cont { width: 100%; height: 135px; background-color: #EDEDED;    }
    #btn1 {
      margin: 30px;
    }
  </style>
</head>
<body style=" height: 2000px; ">
  <input type="button" value="弹出框" id="btn1">
  <div id="popup">
    <div class="title">
      <p data-title="Popup Text"></p>
      <span>x</span>
    </div>
    <div class="cont"></div>
  </div>
  <div id="mask_shadow"></div>
  <script>
    $(function () {
      /**
          ifDrag: 是否拖拽
          dragLimit: 拖拽限制范围
       */
      $('#popup').popup({ifDrag: true, dragLimit: true});
    });
  </script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 图片拖动 浮动导航菜单 右键菜单 图片头像上传 文字拖动 图片广告 文字提示框 文件上传 拖动排序 对联广告 提示框/弹出层 文本框 layer 下拉框 弹出层拖动 叠加浮动层 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 拖动拽动 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到