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

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

  1. Какой модальный плагин лучше подходит для этого ?
  2. Есть ли какой-нибудь рабочий пример этого ? (Я не нашел ни одного...)
  3. Как насчет модального плагина Avgrund, могу ли я сделать это с помощью этого плагина ? (couse, это с очень хорошим эффектом, который мне нравится)
1 2
jquery image-gallery

1 ответ:

Вы можете использовать диалог 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. генерируйте html изображений в вызове ajax и сохраните его, чтобы вы могли просто повторно использовать этот html всякий раз, когда вам нужно показать модальное (если вы измените содержимое модального тела между вызовами)

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

    $("#ModalEditor .модально-телесный ИМГ").ВКЛ ("щелчок", функция() { $("#контейнер").добавить ($(это)); });

5