JavaScript + Ajax 実践サンプル集 - jQuery UIのDialogプラグインを利用して外部サイトのコンテンツを表示する

jQuery UIのDialogプラグインを利用して外部サイトのコンテンツを表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQuery UIのDialogプラグインを利用してダイアログに外部サイトのコンテンツを表示します。サンプルが表示されたら「Goolge」「jQuery」「jQuery UI」のリンクをクリックしてください。ダイアログが開いてウェブサイトのコンテンツが表示されます。ダイアログはリサイズすることができます。

このサンプルを編集して試してみる

このサンプルの解説は、ここを参照してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery UI Dialog w/ Resizable iFrame</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css"  rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $('a').click(function (e) {
        e.preventDefault();
        var $this = $(this);
        var horizontalPadding = 30;
        var verticalPadding = 30;
        $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
          title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
          autoOpen: true,
          width: 800,
          height: 500,
          modal: true,
          resizable: true,
          autoResize: true,
          overlay: {
            opacity: 0.5,
            background: "black"
          }
        }).width(800 - horizontalPadding).height(500 - verticalPadding);
      });
    });
  </script>
</head>
<body>
  <ul>
    <li><a href="http://www.google.com" title="Google Dialog">Google</a></li>
    <li><a href="http://jquery.com" title="jQuery Dialog">jQuery</a></li>
    <li><a href="http://jqueryui.com" title="jQuery UI Dialog">jQuery UI</a></li>
  </ul>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQuery UIのDialogプラグインを利用して外部サイトのコンテンツを表示する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQuery UIのDialogプラグインを利用して外部サイトのコンテンツを表示する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!