モダルダイアログ

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

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

このサンプルは、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>