leanModal.jsをAjax対応にしてみる(Ajaxで取得したhtmlを表示)

モーダルウィンドウを表示するのに良さげな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");
        }
    });
}

こんな感じでどうでしょうか?