【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');
    });
});

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

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください