Skip to content

Commit

Permalink
Added auto-binding based on "rel" attributes and an example page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kylefox
kylefox committed Sep 20, 2010
1 parent fc63faf commit 54377f4
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 51 deletions.
111 changes: 65 additions & 46 deletions example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,32 @@
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
<!-- // <script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script> -->
<script src="jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>

<script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>
<link rel="stylesheet" href="highlight/github.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
body { font: normal 14px/21px "Helvetica Neue", Arial, sans-serif; color: #777; padding: 30px 60px; }
small { color: #aaa; }
h1,h2,h3,h4 { color: #444; }
a { color: #0086B3; font-weight: bold; }
a:hover { color: #000; }
p code, li code {background:#ffffcc; color: #444;}
pre { font-size: 12px; line-height: 18px; }
hr { height: 10px; background: #eee; border: none; }
</style>
<title>jQuery Modal</title>
<style type="text/css" media="screen">
body {
font: normal 14px/24px "Lucida Grande", Verdana, sans-serif;
color: #333;
width: 400px;
margin: 0 auto;
}

#header {
margin: 50px 0;
border-bottom: 1px solid #ddd;
}
/* pre { background: #f4f4f4; padding: 10px;}*/

.modal {
display: none;
width: 400px;
background: #fff;
padding: 15px;
padding: 15px 30px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
Expand All @@ -33,42 +39,55 @@
</head>
<body>

<div id="header">
<h1>jQuery Modal</h1>
<h3>the simplest modal you ever did see.</h3>
</div>
<h1>jQuery Modal</h1>
<p><em>the simplest modal you ever did see.</em></p>
<ul>
<li>Automatic binding using HTML semantics</li>
<li>No images</li>
<li>Light weight <small>(about 1k minified)</small></li>
<li>Close with click or ESC key</li>
<li>Works in every single browser known to man (including Lynx)</li>
</ul>





<h2>Example 1: Default options</h2>
<code><pre>
$('a[href="#hello"]').click(function(event) {
event.preventDefault();
$($(this).attr('href')).modal();
});
</pre></code>
<p><a href="#hello" rel="modal">Open Modal</a></p>
<div class="modal" id="hello">
<h1>Hello there!</h1>
<p>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.</p>
<p><a href="#close_modal">Close</a></p>
</div>

<hr />


<script type="text/javascript" charset="utf-8">
$(function() {

$('a[href="#hello"]').click(function(event) {
event.preventDefault();
$($(this).attr('href')).modal();
});

$('a[href="#close_modal"]').click(function(event) {
event.preventDefault();
$.fn.modal.close();
});

});
</script>
<h3>Example 1 (simplest): Open &amp; Close with links</h3>
<ol>
<li>Embed modal HTML in document <small>(and hide it)</small></li>
<li>Create a link with <code>rel="open-modal"</code> and set the <code>href</code> attribute to the modal's DOM id.</li>
</ol>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/style&gt;
&lt;!-- Don't forget to include jQuery ;) --&gt;
&lt;script src=&quot;jquery.modal.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;!-- Modal HTML embedded directly into document --&gt;
&lt;div id=&quot;ex1&quot; style=&quot;display:none;&quot;&gt;
&lt;p&gt;Thanks for clicking. That felt good. &lt;a href=&quot;#&quot; rel=&quot;close-modal&quot;&gt;Close&lt;/a&gt; or press ESC&lt;/p&gt;
&lt;/div&gt;

&lt;!-- Link to open the modal --&gt;
&lt;p&gt;&lt;a href=&quot;#ex1&quot; rel=&quot;open-modal&quot;&gt;Open Modal&lt;/a&gt;&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<!-- Link to open the modal -->
<h3>Demo: <a href="#ex1" rel="open-modal">Open Modal</a></h3>

<!-- Modal HTML embedded directly into document -->
<div class="modal" id="ex1" style="display:none;">
<p>Thanks for clicking. That felt good. <br />Click <a href="#" rel="close-modal">close</a>, click the overlay, or press ESC</p>
</div>

</body>
</html>
128 changes: 128 additions & 0 deletions highlight/github.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
/*
github.com style (c) Vasily Polovnyov <[email protected]>
*/

pre code {
display: block;
color: #000;
background: #f8f8ff
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .lisp .title,
pre .subst {
color: #000;
font-weight: bold
}

pre .number,
pre .hexcolor {
color: #40a070
}

pre .string,
pre .attribute .value,
pre .phpdoc,
pre .tex .formula {
color: #d14
}

pre .title,
pre .id {
color: #900;
font-weight: bold
}

pre .javascript .title,
pre .lisp .title,
pre .subst {
font-weight: normal
}

pre .class .title,
pre .tex .command {
color: #458;
font-weight: bold
}

pre .tag,
pre .css .keyword,
pre .html .keyword,
pre .tag .title,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}

pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body {
color: #008080
}

pre .regexp {
color: #009926
}

pre .class {
color: #458;
font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .lisp .keyword,
pre .tex .special {
color: #990073
}

pre .builtin,
pre .built_in,
pre .lisp .title {
color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}

pre .deletion {
background: #fdd
}

pre .addition {
background: #dfd
}

pre .diff .change {
background: #0086b3
}

pre .chunk {
color: #aaa
}

pre .tex .formula {
opacity: 0.5;
}
1 change: 1 addition & 0 deletions highlight/highlight.pack.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 54377f4

Please sign in to comment.