iziModalにツイッターを埋め込む方法

こんにちは。

iziModalにツイッターを埋め込むと、モーダルウィンドウを開いた際に埋め込みタグがそのまま表示されてしまうという現象に悩んでいませんか？

本記事では、上記の原因と解決方法を紹介します。

iziModalにツイッターを埋め込む方法

そもそも、上記のような問題が発生する原因は、モーダル要素が表示される前にツイッターが埋め込まれているからです。

この問題を解決するには、モーダルが表示されてから埋め込めばいいのです！

どうやるか？

iziModalのオプションには、afterRenderというコールバックが用意されています。
名前から分かるように、モーダルがレンダリングされてから実行する処理を登録できるわけですね。

実際のコードがこちらです。

<div class="js-modal-content">
    <div class="twitter-inner" data-twitter-include="data1"></div>
</div>

var twitterIncludes = {
    data1: 'ここに埋め込みコード'
};
var modalOption = {
    afterRender: function(e){
        var element = e.$element.find('.twitter-inner');
        var key = element.data('twitter-include');
        element.append(element.append(twitterIncludes[key]));
    }
};

$('.js-modal-content').iziModal(modalOption);

今回のテーマに関係のない部分は省略しています。
ツイッターを埋め込みたい要素にdata属性をもたせJSで取得しています。