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

Question

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

1. 哪个模态插件更适合这个？
2. 有这方面的一些工作示例吗？ （我没有找到任何...）
3. Avgrund modal 插件怎么样，我可以用这个插件做吗？ （当然，效果很好，我喜欢）

Answer 1

您可以使用JQueryUI dialog 或Bootstrap's Modal 我个人使用引导程序的模式，因为我已经加载引导程序来制作响应页面。

引导示例

<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（如果您在调用之间更改 modal-body 的内容）

2. 在下面使用，而不必为每张图片设置点击事件。

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