[jQuery] モーダルウィンドウを表示する

  • このエントリーをはてなブックマークに追加
  • Pocket

attention この記事は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

More details…



ファイル読込部分

<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>

ご訪問ありがとうございます。
参考になりましたら『いいね!』もお願いします。

ITの活用情報を毎週お届けする無料メルマガに是非ご登録ください。

閉じる

ご意見・ご感想をお待ちしております。

いただいた情報は一般公開されません。(入力いただいたメールアドレスにてご返信させていただきます)
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。