Question

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

哪个模态插件更适合这个？
这是否有一些实际的例子？（我没有发现任何......）
Avgrund模态插件怎么样，我可以使用这个插件吗？（相反，它是非常好的效果，我喜欢）

Answer 1

你可以使用JQueryUI dialog或Bootstrap's 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函数以在插入图像后隐藏模态。

你可以做的其他事情：

在ajax调用中生成图像的html并保存它，这样只要你需要显示模态就可以重用那个html（如果你在调用之间改变模态体的内容）
请使用以下内容，而不必为每张图片设置点击事件。

$（“＃ModalEditor .modal-body img”）。on（“click”，function（）{ $（ “＃集装箱”）追加（$（本））。 }）;

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

1 个答案: