Выберите изображение из модального окна и вставьте это изображение на страницу

Question

Я хочу выбрать изображение из изображений, загруженных AJAX в какое-то модальное окно. Когда изображение выбрано, вставьте это выбранное изображение на мою страницу в «DIV id = container».

1. Какой модальный плагин лучше для этого?
2. Есть ли какой-нибудь рабочий пример этого? (Я не нашел никаких ...)
3. Что можно сказать об модульном плагине Avgrund, могу ли я сделать это с помощью этого плагина? (Couse, это очень хороший Efect, который я люблю)

Answer 1

можно использовать JQueryUI dialog или Bootstrap's Modal я лично использую режимные 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(); 
    } 
}); 

Скрытие, Toggling

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

Bootstrap также имеет Premade материал, так что вы не должны писать код, чтобы вызвать модальный, например

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

Вызов модального переключателя.

Кроме того, если вы хотите только как 1 изображение из модального вставленной просто использовать

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

в функции изображения нажмите Анон, чтобы скрыть режимные после того, как изображение было вставлено.

Другие вещи, которые вы можете сделать:

1. Генерация HTML-изображений в вызове Ajax и сохранить его, так что вы можете просто повторно использовать этот HTML каждый раз, когда вам нужно показать модальный (если вы измените содержимое модальное тело между вызовами)

2. Используйте ниже, вместо того чтобы устанавливать событие click для каждого изображения.

   $ ("# ModalEditor .modal тела IMG") на. ("Щелчок", функция() { $ ("# контейнер") добавить ($ (это)). });