The JavaScript, XHR, AJAX and general UI playground.
PopMeUp - Simple JavaScript pop-up
This was by far one of the most enjoyable and yet easiest creations of mine. It’s a very simple piece of JavaScript code that turns any link on a page into a really simple lightbox pop-up.
The reason for creating this rather than just using a MooTools or jQuery plugin was simple.
Why have a separate plug-in for each framework, when you can have one object that is small, quick and easy to implement, works, isn’t dependant on any framework and still maintains link integrity when JavaScript is disabled.
How it works:
The PopMeUp Script was created for quick and easy deployment, and to prove this, download the JavaScript and the CSS files, link them into your page and just add a 'popMeUp' class to the buttons that you would like add a little awesomeness to, and initialize the script.
That simple.
Example:
<a href="#" title="Always have a title" class="popMeUp">
Link text
</a>
Place this at the bottom of the page:
<script type="text/javascript">
popup.Init();
</script>
Additionally, you could specify the height and width of the pop-up for each link, as well as specifying in the pop-up should scroll.
This can all be done by setting the properties in a ‘rel’ tag on the link.
Example:
<a href="#" title="Always have a title" class="customClass popMeUp" rel="height:200, width:300, scroll:'auto'">
Link text
</a>
Place this at the bottom of the page:
<script type="text/javascript">
popup.Init();
</script>
Download
PopMeUp.js - 2.76KB
PopMeUp_compressed.js - 1.66KB
PopMeUp.css