2

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

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

1 回答 1

5

你可以使用JQueryUI 对话框，或者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（如果您在调用之间更改 modal-body 的内容）

  2. 使用下面而不是必须为每个图像设置点击事件。

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

于 2013-06-29T11:21:12.020 回答