I found this tutorial which pretty much does exactly what I want:
http://webstutorial.com/jquery-popup-jquery-slide-popup/jquery
Except that it runs when the body loads, I’ve tried getting it to run onclick but I can’t get it working, can anyone help me get it to run when I click a button instead of when it loads?
JS
function openOffersDialog() {
$('#overlay').fadeIn('fast', function() {
$('#overlay').css('z-index', 100);
$('#overlay').css('opacity', 0.8);
$('#overlay').css('background', '#000000');
$('#boxpopup').css('display','block');
$('#boxpopup').animate({'left':'30%'},500);
});
}
function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
CSS
#wrapper a{
cursor:pointer;
font-size:15px;
font-weight:bold;
text-decoration:underline;
}
.box {
background-color: #ffffff;
color: #888888;
height: 205px;
left: 100%;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 555px;
z-index: 101;
border:5px solid #888888;
border-radius:10px;
-moz-border-radius:10px;
}
.overlay {
/*background: #000000;*/
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: -100;
/*opacity:0.5;*/
}
a.boxclose {
background: url("cancel.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 26px;
left: 32px;
position: relative;
top: -33px;
width: 26px;
}
HTML
<body>
<!--<body onload="openOffersDialog();">-->
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a><button onclick="test();">TESTCLICK</button><button ontouchstart="test();">TESTTOUCH</button>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</div>
</div>
</div>
Any help would be great, thanks.
JavaScript