Select image from modal window and insert this image to page

Question

I want to select image from images loaded by AJAX to some modal window. When image is selected, then insert this selected image to my page to the "DIV id=container".

1. Which modal plugin in better for this ?
2. Is there some working example of this ? (I did not found any...)
3. What about Avgrund modal plugin, can I make it with this plugin ? (couse, it is with very nice efect, which i like )

Answer 1

you could use the JQueryUI dialog, or Bootstrap's Modal I personally use bootstrap's modal as i already load bootstrap for making responsive pages.

Bootstrap example

<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();
    }
});

Hiding, Toggling

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

Bootstrap also has premade stuff so you dont have to write code to trigger a modal for instance

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

Will trigger the modal toggle.

Also if you want to only like 1 image from the modal inserted just use a

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

in the image click anon function to hide the modal after the image has been inserted.

Other things you could do:

1. Generate the html of the images in the ajax call and save it so you can just reuse that html whenever you need to show the modal (if you change the contents of the modal-body inbetween calls)

2. Use below instead of having to set the click event for each image.

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