JavaScript + Ajax 実践サンプル集 - モダルダイアログ

モダルダイアログ

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

このサンプルは、jQueryのjqModal()プラグインを利用してモダルダイアログを表示します。[Close]をクリックするとダイアログが閉じます。

ancor要素のclass属性に「jqModal」を設定すると、このanchorが自動的にダイアログを表示するトリガーになります。つまり、アンカーテキストをクリックするとダイアログが表示されます。ダイアログに表示するコンテンツは、div要素で宣言します。ここでは、div(id="dialog)にコンテンツを宣言しています。

$(function() {
　$('#dialog').jqm(); // default dialog 
  $('#dialog').jqm({ modal: true }); // modal dialog  
});

<a href="#" class="jqModal">view</a> 

<div class="jqmWindow" id="dialog">
  <a href="#" class="jqmClose">Close</a>
  <hr>

</div>

<!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 - Modal Window </title>
  <link href="jQuery/jqModal/jqModal.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/jqModal/jqModal.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      //$('#dialog').jqm();
      $('#dialog').jqm({ modal: true });  
    });
  </script>

</head>
<body>

<div>
    Out-of-box behavior. 
    The window and its content is taken "inline" from the element with an ID of 'dialog'. 
    The dialog is "triggered" (shown) when element(s) with class jqModal are clicked. 
    No parameters are passed, no fancy window decorations used.   
  </div>

<div class="jqmWindow" id="dialog">
    <a href="#" class="jqmClose">Close</a>
    <hr>
    <em>READ ME</em> --> This is a "vanilla plain" jqModal window. Behavior and appeareance
    extend far beyond this. The demonstrations on this page will show off a few possibilites.
    I recommend walking through each one to get an understanding of jqModal <em>before</em>
    using it.
    <br />
    <br />
    You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML
    tabs. Be sure to checkout the <a href="#">documentation</a> too!
    <br />
    <br />
    <em>NOTE</em>; You can close windows by clicking the tinted background known as
    the "overlay". Clicking the overlay will have no effect if the "modal" parameter
    is passed, or if the overlay is disabled.
  </div>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

モダルダイアログ

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

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

モダルダイアログ

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

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