好用的弹窗，可用于图片展示及日志记录等

因为实际项目需要，在展现日志，图片等上需要一个弹窗组件，可pc,手机端通用最好不过。网上的一些bootstrap等窗体过于繁杂，在多个页面不同需求下，展现并不好。
所以，个人对网上一个js简易窗体进行了改动，新增了可鼠标拖动（解决实际需求上窗体挡住原信息问题），新增高度自适应，ajax或url自定义等。

<script type="text/javascript" src="${ctx}/static/lib/bootstrap/js/style.js"></script>

属性调用

function showLog() { var html = ''; .... ....

    pop({
        width: 500,
        height: 'auto',
        title: '携物日志',
        content: html  (或可直接url路径)
    });
}

鼠标拖动（可单独拿出）

var flag=false; var mouseLeft; var mouseTop;

$('#mry-opo-title').mousedown(function(event){  
    var downX=event.pageX;       //获取鼠标坐标
    var downY=event.pageY;
    var offsetLeft=$('#mry-opo').position().left    //获取弹出框的left值
    var offsetTop =$('#mry-opo').position().top
    mouseLeft=downX-offsetLeft;       //计算鼠标在弹出框中的位置
    mouseTop =downY-offsetTop;
    flag=true;
});



$(document).mousemove(function(event){  
    
    if(flag==true){
        var moveX=event.pageX;       //获取鼠标坐标
        var moveY=event.pageY;
        var moveLeft=moveX-mouseLeft;  //获取移动过程中弹出框的left值
        var moveTop =moveY-mouseTop;
        var maxX=$(document).width() -$('#mry-opo').outerWidth();
        var maxY=$(document).height()-$('#mry-opo').outerHeight();
        $('#mry-opo').css({'left':moveLeft,'top':moveTop,'backgroud':'red'});
    }
    
});

$(document).mouseup(function(event){  
    flag=false;
});

完整css+js链接 弹窗下载
Github https://github.com/imsadan

转载自原文链接, 如需删除请联系管理员。

原文链接：好用的弹窗，可用于图片展示及日志记录等，转载请注明来源！