使用jQuery-ui预览图片

1、官网下载地址：http://jqueryui.com/download/

2、引入文件，本地环境是laravel：

<link rel="stylesheet" href="{{ '/public/jquery-ui/jquery-ui.min.css' }}">
<script type="text/javascript" src="{{ '/public/jquery-ui/jquery-ui.min.js' }}"></script>

3、有一个容器，用来放图片：

<div id="showDetail" style="display:none"><img src="" id="showImg" alt=""></div>

4、函数处理：

function showImg(name, path)
        {
            $('#showImg').attr("src", path);
            $('#showDetail').dialog({
                height: 'auto',
                width: 'auto',
                position: {my:"center", at:"center", collision:"fit"},
                modal: false,  // 是否模式对话框
                draggable: true,   // 是否允许拖拽
                resizable: true,   // 是否允许拖动
                title: name,   // 对话框标题
                show: "slide",
                hide: "explode"
            });
        }

5、效果