forked from voronianski/jquery.avgrund.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
merged pull request voronianski#61 from
- Loading branch information
Showing
6 changed files
with
141 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,111 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="author" content="Dmitri Voronianski"> | ||
<title>jQuery plugin for Avgrund concept popin</title> | ||
<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'> | ||
<link rel="stylesheet" href="http://labs.voronianski.com/media/style/reset.css"> | ||
<link rel="stylesheet" href="./css/style.css"> | ||
<link rel="stylesheet" href="../style/avgrund.css"> | ||
|
||
<!--[if lt IE 9]> | ||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> | ||
<![endif]--> | ||
</head> | ||
<body> | ||
<div id="container" class="container"> | ||
<h1>Avgrund Modal: example with long page.</h1> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed velit fugit, in consequatur adipisci id deserunt non voluptates quaerat molestias quod magnam, libero iusto neque quasi ducimus mollitia possimus esse. Voluptatem repellat voluptates ad neque eveniet nisi, fugit assumenda iure exercitationem blanditiis eos, maxime harum doloribus incidunt veniam, impedit excepturi. | ||
</p> | ||
<div class="buttons"> | ||
<a href="#" id="show" class="button left">Show it</a> | ||
<a href="https://github.com/voronianski/jquery.avgrund.js" class="button download left" target="_blank">Download source</a> | ||
</div> | ||
|
||
<p class="clear">You can simply init Avgrund with one line:</p> | ||
<pre>$('element').avgrund();</pre> | ||
|
||
<p>Avgrund has several options for you to customize it easily:</p> | ||
|
||
<p>Avgrund plugin was inspired by Hakimel's Avgrund.js <a href="https://github.com/hakimel/avgrund/" target="_blank">demo</a>.</p> | ||
|
||
<div class="socials"> | ||
<span>©2012</span> | ||
<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> / | ||
<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a> | ||
</div> | ||
</div> | ||
|
||
<a href="https://github.com/voronianski/jquery.avgrund.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a> | ||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | ||
<script src="../jquery.avgrund.js"></script> | ||
<script> | ||
$(function() { | ||
$('#show').avgrund({ | ||
height: 200, | ||
holderClass: 'custom', | ||
showClose: true, | ||
showCloseText: 'close', | ||
onBlurContainer: '', | ||
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>' + | ||
'<div>' + | ||
'<a href="http://github.com/voronianski/jquery.avgrund.js" target="_blank" class="github">Avgrund on Github</a>' + | ||
'<a href="http://twitter.com/voronianski" target="_blank" class="twitter">Twitter</a>' + | ||
'<a href="http://dribbble.com/voronianski" target="_blank" class="dribble">Dribbble</a>' + | ||
'</div>' | ||
}); | ||
}); | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters