この記事は2年以上前の投稿になります。記載された情報が古くなっている可能性がございますので十分ご注意ください。
jQueryを使って、モーダルウィンドウ(ウィンドウを閉じないと他の操作ができないウィンドウ)を表示させることができるプラグインを紹介します。
[SimpleModal] A Modal Dialog Framework Plugin for jQuery
Basic Modal Dialog
For this demo, SimpleModal is using this “hidden” data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).
Examples:
$('#basicModalContent').modal(); // jQuery object - this demo
$.modal(document.getElementById('basicModalContent')); // DOM
$.modal('<p><b>HTML</b> elements</p>'); // HTML
$('<div></div>').load('page.html').modal(); // AJAX
ファイル読込部分
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' /> <script type='text/javascript' src='js/jquery-1.7.2.min_.js'></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script type='text/javascript' src='js/uploads/basic.js'></script>
コンテンツ部分
<div id='basic-modal'> <h3>サンプルモーダルウィンドウ</h3> <p>下のリンクをクリックするとモーダルウィンドウが表示されるよ。</p> <a href='#' class='basic'>ここをクリック</a> </div> <!-- モーダルウィンドウの部分 --> <div id="basic-modal-content"> <h3>タイトル</h3> <p>本文</p> </div>
