1.子窗体
在设计网站的时候，我们需要设计一些模态的子窗体，比如
这一步很容易实现，只需要div+css就ok了，请看代码：
复制代码 代码如下:
点住着块区域可以改变我的位置
复制代码 代码如下:
.modal-background
{
    background-color: #999999;
    bottom: 0;
    left: 0;
    opacity: 0.3;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
}.modal-window
{
    background-color: #ffffff;
    border: 1px solid #6b94ad;
    box-shadow: 5px 5px 5px #6b94ad;
    font-family: 'microsoft yahei';
    font-size: 12px;
    height: 120px;
    left: 50%;
    margin-left: -160px;
    margin-top: -160px;
    opacity: 1;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1110;
}
    .modal-window .head
    {
        height: 25px;
        color: #fff;
        font-weight: 600;
        background-image: -moz-linear-gradient(top, #4a8cc5, #2963a5); /* firefox */
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4a8cc5), color-stop(1, #2963a5)); /* saf4+, chrome */
        filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#4a8cc5', endcolorstr='#2963a5', gradienttype='0'); /* ie*/
    }
        .modal-window .head center
        {
            padding-top: 2px;
        }
加上上述html和css就可以很容易实现上述模态窗体的效果。其中left: 50%;top: 50%; margin-left: -160px; margin-top: -160px;是为了实现这个模态窗体的居中效果。
当然，模态窗体的大小在样式类.modal-window中是固定写好的了，这并不是说不可修改模态窗体的大小，比如我写如代码：
复制代码 代码如下:
点住着块区域可以改变我的位置
在第二行代码中追加了.list-window这个样式类来覆盖.modal-window类中的大小和位置，但同时保证模态窗体居中显示
复制代码 代码如下:
.list-window
{
    width:600px;
    height:400px;
    margin-left:-300px;
    margin-top:-200px;
}
如图
可以看得出来，这一步的实现是非常简单的，掌握几个关键行的css属性就完虐这个模态子窗体，各类其它的模态子窗体可以举一反三咯。
2.当鼠标点住子窗体的头部时，如何实现子窗体的拖拽移动呢？当引入jq后，我们只需要很少的脚本就搞定这个小功能。不信我们看
复制代码 代码如下:
var left, top, $this;
$(document).delegate('.modal-window .head', 'mousedown', function (e) {
    left = e.clientx, top = e.clienty, $this = $(this).css('cursor', 'move');
    this.setcapture ? (
    this.setcapture(),
    this.onmousemove = function (ev) { mousemove(ev || event); },
    this.onmouseup = mouseup
    ) : $(document).bind(mousemove, mousemove).bind(mouseup, mouseup);
});
function mousemove(e) {
    var target = $this.parents('.modal-window');
    var l = math.max((e.clientx - left + number(target.css('margin-left').replace(/px$/, '')) || 0), -target.position().left);
    var t = math.max((e.clienty - top + number(target.css('margin-top').replace(/px$/, '')) || 0), -target.position().top);
    l = math.min(l, $(window).width() - target.width() - target.position().left);
    t = math.min(t, $(window).height() - target.height() - target.position().top);
    left = e.clientx;
    top = e.clienty;
    target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseup(e) {
    var el = $this.css('cursor', 'default').get(0);
    el.releasecapture ?
    (
        el.releasecapture(),
        el.onmousemove = el.onmouseup = null
    ) : $(document).unbind(mousemove, mousemove).unbind(mouseup, mouseup);
}
这段代码非常简短，能否在各种浏览器中很流畅的运行。
其实它的实现原理非常简单，大致分为三步：
①当鼠标在模态窗体头部点下(mousedown)时，立即给document绑定mousemove和mouseup事件
②当鼠标没有弹起时(没有mouseup)时，若鼠标在窗体内移动时，激活mousemove函数，通过计算鼠标移动的距离来及时整个窗体的位置移动。
③当鼠标弹起(mouseup)时，调用mouseup事件,将document上绑定的mousemove事件和mouseup事件解除绑定。
整个过程的原理就是：当鼠标mousedown时，鼠标的移动事件转移到document上来，通过鼠标在document上的移动事件来对整个窗体进行处理。
另外，在mousemove中有个小技巧，就是全局的left，top变量记录上一次鼠标停止时的位置，然后下一次移动时鼠标的位置与left，top变量进行对比来确定鼠标移动了多少距离，来对整个模态子窗体做出相应的位置移动即可。
经过这一段代码的分析，发现鼠标移动窗体乃至document上的任何元素都是相当easy的
比如，如果想要通过拖拽来改变窗体的大小，一样我们只需要在mousemove事件处理函数中调整窗体的大小就ok了，是不是又发现自己有多学会了一招，又精进了一小步呢？
有人会问setcapture和releasecapture分别都是干什么的呢？其实这是为了兼容ie，仅有ie才有这俩函数，在此鄙视ie。setcapture可以让当前元素捕获鼠标的所有事件，如果不使用它们，可能不兼容ie浏览器哦。