從模式窗口中選擇圖片並將該圖片插入頁面

Question

我想從AJAX加載的圖像中選擇圖像到某個模式窗口。選擇圖像後，將所選圖像插入我的頁面到「DIV id =容器」。

1. 哪個模式插件更好？
2. 這是否有一些工作的例子？ （我沒有發現任何...）
3. 平均模式插件呢，我可以使用這個插件嗎？ （職高，這是非常好的效應，這是我喜歡）

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 

引導也有預製的東西，所以你不必編寫代碼來觸發模式，例如

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

將觸發模式切換。

此外，如果你想只喜歡從插入模式1個圖像只使用一個

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

圖像點擊匿名函數隱藏模式的圖像已被插入之後。

其他事情可以做：

1. 生成Ajax調用圖像的HTML和保存它，所以你可以只重用HTML每當你需要顯示模式（如果您更改的內容中間呼叫的模態主體）

2. 使用下面的代碼，而不必爲每個圖像設置點擊事件。

   $（ 「＃ModalEditor .modal體IMG」）上。（ 「點擊」，函數（）{ $（ 「＃集裝箱」）追加（$（本））; }）;