Example 1: Simple Modal
A simple link showing a "README" content when clicked.
HTML LINK
<p>
<a href="#readme" rel="modal:open"
class="pure-button pure-button-primary">Click here to show the README</a>
</p>HTML README
<div id="readme" class="example" style="display:none;">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
rhoncus mauris vitae bibendum rutrum. Curabitur nec turpis mauris. Maecenas
ut tempor arcu, sed finibus libero. Mauris arcu ligula, vestibulum eget
arcu ac, pharetra suscipit quam. Ut sit amet semper arcu, vitae feugiat mi.
Ut ac vulputate turpis. Maecenas id arcu iaculis, laoreet nisl sed, posuere
augue. Phasellus vel porttitor nisl. Aliquam iaculis nulla ut porttitor
pretium. Integer ac dui libero. Suspendisse ipsum tellus, porta vel est eu,
tristique varius felis. Pellentesque at nisl ut erat semper interdum.
Pellentesque ac iaculis leo. Nam id leo sit amet dolor luctus pharetra.
Aenean quis diam consequat eros aliquam ornare quis sit amet nisi. Praesent
id mattis eros.</p>
<h3>Dolor Imet</h3>
<p>Aenean interdum diam vestibulum, posuere neque ut, facilisis ligula.
Mauris quam enim, auctor quis commodo quis, suscipit sed quam. Sed arcu
dolor, consequat a aliquet sit amet, blandit sed nisl. In ac tortor in
massa pulvinar porta id a lectus. Aliquam efficitur rutrum mauris at
euismod. Etiam rutrum dui et ante placerat, quis vulputate neque pulvinar.
Nam rhoncus convallis enim, vel euismod massa aliquam ut. Pellentesque
vitae ligula id sem condimentum dignissim eu imperdiet risus. In hac
habitasse platea dictumst.</p>
</div>CSS
Nothing to do.
Please hide or disable the target content if need be with an inline style.
JS
Nothing to do as well.
When the page has loaded the javascript will handler the events for you.