从模态窗口中选择图像并将此图像插入页面

Question

我想从AJAX加载的图像中选择图像到某个模态窗口.选择图像后,将选定的图像插入我的页面"DIV id = container".

1. 哪个模态插件更适合这个？
2. 这有一些实际的例子吗？(我没找到......)
3. 那么Avgrund模态插件呢,我能用这个插件制作吗？(相反,它是非常好的效果,我喜欢)

Answer 1

您可以使用JQueryUI对话框,或者Bootstrap的Modal我个人使用bootstrap的模态,因为我已经加载了bootstrap来制作响应式页面.

Bootstrap示例

<div id="ModalEditor" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="modalLabel">Editor</h3>
    </div>
    <div class="modal-body">
        //Put the contents of the dialog here
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button id="doneBtn" class="btn btn-success" data-dismiss="modal" aria-hidden="true">Done</button>
    </div>
</div>

使用Javascript

$.ajax({
    url:"someurl.com/getImages.php",
    dataType:"json",
    success:function(data) {
        //insert your images into the modal body
        for(var i=0; i<data.images.length; i++) {
            var someimage = $('<img src="'+data.images[i].src+'" />') //make the image element however with whatever data you get
            $("#ModalEditor .modal-body").append( someimage );
            someimage.click(function() { $("#container").append($(this)); });
        }
        $("#ModalEditor").modal();
    }
});

隐藏,切换

$("#ModalEditor").modal('hide') // will hide modal
$("#ModalEditor").modal('toggle') // will toggle the modal visible/hidden

Bootstrap也有预制的东西,所以你不必编写代码来触发模态

<button type="button" data-toggle="modal" data-target="#ModalEditor">Launch modal</button>

将触发模态切换.

此外,如果你只想从插入模态的1个图像中使用一个

$("#ModalEditor").modal('hide'); 

在图像中单击anon函数以在插入图像后隐藏模态.

你可以做的其他事情:

1. 在ajax调用中生成图像的html并保存它,这样只要你需要显示模态就可以重用那个html(如果你在调用之间改变模态体的内容)

2. 使用下面而不必为每个图像设置click事件.

   $("#ModalEditor .modal-body img").on("click",function(){$("#container").append($(this));});