Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //adding a close button to the overlay and bind a click on it to close the overlay
- $(document).ready(function() {
- var winWidth = $(window).width();
- var winHeight = $(window).height();
- var edgeSpace = 40;
- var iframeWidth = winWidth - edgeSpace * 2;
- var iframeHeight = winHeight - edgeSpace * 2;
- $('#demo').click(function() {
- //add a close anchor inside the overlay div
- $('body').append('<div id="demoarea"><iframe src="'+$(this).attr('href')+'" width="'+iframeWidth+'" height="'+iframeHeight+'"></iframe><a href="#close" id="close"></a></div>');
- $('#demoarea').css({
- 'position' : 'fixed',
- 'top' : edgeSpace+'px',
- 'left' : edgeSpace+'px',
- 'background' : 'white',
- 'max-height' : iframeHeight+'px',
- 'box-shadow' : '0 0 '+edgeSpace+'px black',
- '-moz-box-shadow' : '0 0 '+edgeSpace+'px black',
- '-webkit-box-shadow' : '0 0 '+edgeSpace+'px black',
- }).children('#close').css({ //style the close anchor
- 'position' : 'absolute', //make it position absolute to the overlay div
- 'top' : '-15px', //position it to top
- 'left' : '-15px', //and to left
- 'display' : 'block', //make it a block
- 'width' : '30px', //set width of background image
- 'height' : '30px', //and height
- 'background' : 'url(images/close.png)' //and the actual url of the background image
- }).click(function() { //bind a click on the close anchor
- $(this).parent().remove(); //remove the overlay div from the dom
- return false; //dont follow the link
- });
- return false;
- });
- });
Add Comment
Please, Sign In to add comment