予告:Raindrops1.348 モーダルボックスのサポート

モーダルボックスを表示するための rd-modal クラスを追加します

test

<a href="https://www.tenman.info/wp3/raindrops/2016/02/12/%e4%ba%88%e5%91%8a%ef%bc%9araindrops1-348%e3%80%80%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e3%82%b5%e3%83%9d%e3%83%bc%e3%83%88/#modal_box_4177_2" class="modal-link" title="hello world">test</a>
<div class="rd-modal" id="modal_box_4177_2">
	<div class="color4">
		<div class="header color-3 block">
                   <h3>hello world</h3>
                </div>
		<div class="body">
			
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="footer color5 block"> <a href="#page" ><span class="lb-close color5 pad-s corner">Close</span></a> </div> </div> </div>

モーダルボックスを表示するリンクは、シングルページだけで表示します。

すべてのページで表示します
id,href には、ユニークなIDを指定してください。
#raindrops_modal_fragment_id_automatic 、 id=”raindrops_modal_fragment_id_automatic ”は、自動的にリンクとIDに置換されますので、そのままコピペで表示できます。

サンプルのボックスシャドウは、スタイルに含みません。


コメントは受け付けていません。