2015年6月28日日曜日

[jQuery] 別ページをダイアログとして表示する

小ネタ。jQuery UI を使って、別ページをダイアログとして表示するサンプルです。

以下の 2 つのページ (ファイル) を同一階層に保存します。

main.html (親):

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script>
function openAsDialog(url) {
    var iframeStyle = 'min-width     : 100%; ' +
                      'height        : 100%; ' +
                      'padding-top   : 0.2em; ' +
                      'padding-right : 0; ' +
                      'padding-bottom: 0.8em; ' +
                      'padding-left  : 0;';
    var iframe = $('<iframe frameborder="0" src="' + url + '" style="' + iframeStyle + '"></iframe>');
    var dialogOptions = {
        width : 640,
        height: 480,
        title : '神経質な子供の子猫',
        modal : true
    };
    iframe.dialog(dialogOptions);
}
</script>
<a href="#" onclick="openAsDialog('sub.html')">神経質な子供の子猫</a>

sub.html (子):

<script type="text/javascript">window.location='http://nervouskidkitten.tumblr.com/'</script>


実行と結果

main.html を開き、ページ内のリンクをクリックすると、sub.html がダイアログとして表示されます。

実行結果

参考

0 件のコメント:

コメントを投稿