html部分

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>模态框</title>
  7.     <!-- IMPORT CSS -->
  8.     <link rel="stylesheet" href="css/bootstrap.min.css">
  9.     <style>
  10.         .modal-backdrop {
  11.             display: none;
  12.             background: rgba(0, 0, 0, .5);
  13.         }
  15.         .modal {
  16.             width: 500px;
  17.             height: 264px;
  18.             transition: opacity .3s linear !important;
  19.         }
  21.         .modal .modal-dialog {
  22.             margin: 0;
  23.         }
  25.         .modal .modal-header {
  26.             cursor: move;
  27.         }
  28.     </style>
  29. </head>
  31. <body>
  32.     <!-- Button-->
  33.     <button type="button" class="btn btn-primary" id="loginBtn">
  34.         百度登录
  35.     </button>
  37.     <!-- Modal -->
  38.     <div class="modal" id="loginModal" style="opacity:0">
  39.         <div class="modal-dialog">
  40.             <div class="modal-content">
  41.                 <div class="modal-header">
  42.                     <h5 class="modal-title">百度登录</h5>
  43.                     <button type="button" class="close" id="loginCloseBtn">
  44.                         <span>&times;</span>
  45.                     </button>
  46.                 </div>
  47.                 <div class="modal-body">
  48.                     夫君子之行，静以修身，俭以养德。非淡泊无以明志，非宁静无以致远。夫学须静也，才须学也，非学无以广才，非志无以成学。淫慢则不能励精，险躁则不能治性。年与时驰，意与日去，遂成枯落，多不接世，悲守穷庐，将复何及！
  49.                 </div>
  50.                 <div class="modal-footer">
  51.                     <button type="button" class="btn btn-primary">提交</button>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56.     <div class="modal-backdrop" id="loginModalBack"></div>
  58.     <!-- IMPORT JS -->
  59.     <script src="js/jquery.min.js"></script>
  60.     <script src="js/drag-plugin.js"></script>
  61.     <script src="js/dialog.js"></script>
  62. </body>
  63. </html>

js部分

  1. let $loginBtn = $('#loginBtn'),
  2.     $loginModal = $('#loginModal'),
  3.     $loginCloseBtn = $('#loginCloseBtn'),
  4.     $loginModalBack = $('#loginModalBack'),
  5.     $window = $(window);
  6. $loginBtn.click(function () {
  7.     $loginModal.css("display", "block");
  8.     $loginModalBack.css('display', 'block');
  9.     $loginModal.css("opacity", 1);
  11.     // 实现居中
  12.     $loginModal.css({
  13.         left: ($window.outerWidth() - $loginModal.outerWidth()) / 2,
  14.         top: ($window.outerHeight() - $loginModal.outerHeight()) / 2
  15.     });
  16. });
  17. $loginCloseBtn.click(function () {
  18.     $loginModal.css('opacity', 0).one('transitionend', function () {
  19.         $loginModal.css('display', 'none');
  20.         $loginModalBack.css('display', 'none');
  21.     });
  22. });
  24.  let $modalHeade = $loginModal.find('.modal-header'),
  25.     $document = $(document),
  26.     $window = $(window);
  27. // 这样处理，当鼠标按下的时候，DOWN 方法中的 THIS 是 MODAL-HEAD，但是我们后期要操作整个盒子的样式，我们最好让 THIS 变为整个盒子（原生 JS 对象）
  28. // $modalHeade.on('mousedown', down);
  29. $modalHeade.on('mousedown', down.bind($loginModal.get(0)));
  31. function down(ev) {
  32.     let $this = $(this);
  33.     this.startX = ev.pageX;
  34.     this.startY = ev.pageY;
  35.     this.startL = parseFloat($this.css('left'));
  36.     this.startT = parseFloat($this.css('top'));
  37.     this._move = move.bind(this);
  38.     this._up = up.bind(this);
  39.     $document.on('mousemove', this._move);
  40.     $document.on('mouseup', this._up);
  41. }
  43. function move(ev) {
  44.     let $this = $(this),
  45.         curL = ev.pageX - this.startX + this.startL,
  46.         curT = ev.pageY - this.startY + this.startT;
  47.     let minL = 0,
  48.         minT = 0,
  49.         maxL = $window.outerWidth() - $this.outerWidth(),
  50.         maxT = $window.outerHeight() - $this.outerHeight();
  51.     curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
  52.     curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
  53.     $this.css({
  54.         top: curT,
  55.         left: curL
  56.     });
  57. }
  59. function up(ev) {
  60.     $document.off('mousemove', this._move);
  61.     $document.off('mouseup', this._up);
  62. } 
  64. /* 
  65.  * 给元素设置自定义属性
  66.  *   1. 给内存空间中设置一个属性
  67.  *     box.myIndex=1;
  68.  *     $box.myIndex=1;
  69.  * 
  70.  *   2. 把自定义属性设置在元素的行内属性上（设置的属性值最后都要变为字符串）
  71.  *     我们在案例中，数据绑定阶段，把一些值存储到元素的行内上，以后要获取的时候只能基于 attr / getAttribute 获取
  72.  *     box.setAttribute('myIndex',1);
  73.  *     $box.attr('myIndex',1);
  74.  */