【jQuery UI】ダイアログでiframeを使うアレコレ

jQuery UIのダイアログを使って他ページを読み込むあれこれです(‘ω’)

実装イメージ

ボタンを押下したら対応したページをダイアログ表示する。
表示するページが読み込み終わった表示する。
なんとなくモーダル

HTMLソース

buttonタグごとのvalueにURL書いてます。

<body>
    <button class="open_button" value="https://miko.info">Open1</button>
    <button class="open_button" value="https://miko.info/blog/?p=427">Open2</button>
    <button class="open_button" value="https://miko.info/?page_id=450">Open3</button>

    <div id="dialog">
        <button id="close_button">Close</button>
        <iframe src="" name="ifdialog">
    </div>
</body>

jQueryソース

普通の簡単なコードです。
iframeのonloadイベント時にモーダル表示するようにしてます。

$(function(){
    $('#dialog').dialog({
        modal: true,
        autoOpen: false,
        height:500,
        width:550,
    });

    // 各ボタンに設定されているURLをiframeにロードさせる。
    $('.open_button').click(function(event) {
        $('iframe[name=ifdialog]').attr({'src':$(this).val()});
        $('iframe[name=ifdialog]')[0].onload = function(){$("#dialog").dialog('open')};
    });

    $('#close_button').click(function(event) {
        $("#dialog").dialog('close');
    });
});

古戦場を走り終えて眠い(˘ω˘)

実装イメージ

HTMLソース

jQueryソース

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル