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"); } }); }
こんな感じでどうでしょうか?