//HTML部分<div class="wrap"></div><div class="popUpBox">　　<div class="layer-head"><div class="layer-head-text">彈出框</div><div class="layer-close"></div></div>　　<div class="layer-body"></div>　　<div class="layer-footer">　　　　<div class="layer-footer-button-group">　　　　　　<div class="layer-footer-button layer-sure">確定</div>　　　　　　<div class="layer-footer-button layer-cancel">取消</div>　　　　</div>　　</div></div>//CSS部分.wrap {position: fixed;left: 0;top: 0;background-color: #000;z-index: 10000;  opacity: 0.3;}.popUpBox {　　height: 400px;　　width: 700px;　　position: absolute;　　overflow: hidden;　　box-sizing: border-box;　　z-index: 10000;　　background-color: #fff;　　border-radius: 2px;　　box-shadow: 1px 1px 50px rgba(0,0,0,.3);}.layer-head {　　width: 100%;　　height: 35px;　　border-bottom: 1px solid #eee;　　box-sizing: border-box;　　background-color: #f8f8f8;　　border-radius: 4px 4px 0 0;　　cursor: move;}.layer-head-text {　　padding-left: 20px;　　font-size: 14px;　　color: #333;　　height: 35px;　　line-height: 34px;　　float: left;}.layer-close {　　float: right;　　width: 16px;　　height: 16px;　　background-image: url(../images/close_hover.png);　　background-repeat:no-repeat;　　background-size:100% 100%;　　position: absolute;　　top: 10px;　　right: 12px;　　cursor: pointer;}.layer-body {　　width: 100%;　　height: calc(100% - 73px);}.layer-footer {　　width: 100%;　　height: 38px;　　border-top: 1px solid #eee;　　box-sizing: border-box;　　background-color: #f8f8f8;　　border-radius: 0 0 4px 4px;}.layer-footer-button-group {　　padding: 5px 0 5px 576px;　　height: 28px;}.layer-footer-button {　　width: 56px;　　height: 28px;　　line-height: 28px;　　margin-right: 6px;　　box-sizing: border-box;　　font-size: 12px;　　float: left;　　text-align: center;　　cursor: pointer;}.layer-sure {　　border: 1px solid #4898d5;　　background-color: #2e8ded;　　color: #fff;}.layer-cancel {　　border: 1px solid #dedede;　　background-color: #f1f1f1;　　color: #333;}//點擊某物體時，用drag對象即可，move和up是全局區域，也就是整個文檔通用，應該使用document對象而不是drag對象(否則，采用drag對象時物體只能往右方或下方移動)$(document).on('mousedown', '.layer-head', function(e) {　　e = e || window.event; //兼容ie瀏覽器　　var drag = $(this).parent();　　$('body').addClass('select'); //webkit內核和火狐禁止文字被選中　　document.body.onselectstart = document.body.ondrag = function() { //ie瀏覽器禁止文字選中　　return false;}if ($(e.target).hasClass('layer-close')) { //點關閉按鈕不能拖拽模態框　　return;}　　var diffX = e.clientX - drag.offset().left; //鼠標點擊物體那一刻相對于物體左側邊框的距離=點擊時的位置相對于瀏覽器最左邊的距離-物體左邊框相對于瀏覽器最左邊的距離　　var diffY = e.clientY - drag.offset().top;　　$(document).on('mousemove', function(e) {　　　　e = e || window.event; //兼容ie瀏覽器 　　　　var left = e.clientX - diffX; 　　　　var top = e.clientY - diffY;　　　　if (left < 0) { 　　　　　　left = 0; 　　　　} else if (left > window.innerWidth - drag.width()) { 　　　　　　left = window.innerWidth - drag.width(); 　　　　}　　　　if (top < 0) { 　　　　　　top = 0; 　　　　} else if (top > window.innerHeight - drag.height()){ 　　　　　　top = window.innerHeight - drag.height(); 　　　　}　　　　//移動時重新得到物體的距離，解決拖動時出現晃動的現象　　　　drag.css({　　　　　　'left': left + 'px',　　　　　　'top': top + 'px'　　　　});　　});　　$(document).on('mouseup', function(e) { //當鼠標彈起來的時候不再移動 　　　　$(document).unbind("mousemove");　　　　$(document).unbind("mouseup");　　});});