leanModal.jsをAjax対応にしてみる(Ajaxで取得したhtmlを表示)
2014年1月17日
モーダルウィンドウを表示するのに良さげなPluginを探してたら軽量なjsとして紹介されていたのがleanModal.js
ただ、これAjaxに対応してないようですね。
(元々html内に用意されたものしか表示できない)
でも別のクリックイベント発生時に、Ajaxで取得してhtmlを生成、その後leanModalのクリックイベントを発生させれば、動くんじゃないか?と思ったわけです。
<a id="open_button">開く</a> <a href="#modal" id="open_modal" style="display:none;"></a> <div id="modal" style="display:none;"> <div id="modal_content"></div> </div>
$(function(){
$("#open_button").click(function(){
get_html();
});
$("#open_modal").leanModal();
});
function get_html() {
$.ajax({
type: "POST",
url: "/xxxxx/xxxxx",
data: { id: 111111 },
dataType: "html",
success: function( html ) {
$('#modal_content').html( html );
$('#open_modal').trigger("click");
}
});
}
こんな感じでどうでしょうか?