cssだけで作る手軽で軽量なモーダルウィンドウの（２）です。「モーダルウィンドウを表示」ボタンをクリックすると、背景のオーバーレイの明度を落として、その場にモーダルウィンドウを表示します。表示したモーダルウィンドウの外側や「閉じる」ボタンをクリックすると閉じます。

 

サンプルのhtmlソース

<div id="modal">
	<div id="open01">
		<a href="#" class="close_overlay">×</a>
		<div class="modal_window">
		<h2>百万石&nbsp;WEB受注システム（モーダルウィンドウサンプル）</h2>
		<p>「経費節減+顧客満足度UP」を図るなら、WEB受注をお勧めします！！
			まずは受注全体の50%をWEB受注にしてみてはいかがでしょう。
			既存システムの変更不要で即行稼動します！！</p>
		<p>どこかコストを削減できないかとお嘆きの経営者の皆様。
			本当のコストダウンは受注から始まります。</p>
		<p>携帯電話、スマートフォン、iPad等の端末からの利用（発注）にも対応可能です。</p>
		<a class="button2" href="#">閉じる</a>
		</div>
	</div>
</div>