使用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、效果