2

AJAXによってロードされた画像からモーダルウィンドウに画像を選択したい。画像を選択したら、この選択した画像をマイページの「DIV id=container」に挿入します。

  1. これにはどのモーダルプラグインが適していますか?
  2. これの実例はありますか？(見つからなかった…)
  3. Avgrund モーダル プラグインはどうですか? このプラグインで作成できますか? （もちろん、それは私が好きな非常に素晴らしい効果を持っています）
4

1 に答える 1

5

JQueryUI ダイアログ、または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

ブートストラップには事前に作成されたものもあるため、たとえばモーダルをトリガーするコードを記述する必要はありません

<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 に答える