Reputation: 968
On my home page I have created a anchor at the bottom of the page under the name of "get in touch" that has a class of Contact-pop-up and in the Jquery have added a.contact-pop-up to the Jquery so onClick it will perform the script but when I go to test by pressing on the get in touch anchor it doesn't seem to work.
I was wondering if anyone knows why this would be?
Jquery
$('a.contact , a.contact_footer , a.contact-pop-up').click(function() {
$("#popup").load("contact.php");
// Getting the variable's value from a link
var
show = $('#popup').css('display', 'block'),
popup = $(this).attr('href');
//Fade in the Popup and add close button
$(popup).fadeIn(300);
//Set the center alignment padding + border
var popMargTop = ($(popup).height() + 24) / 2;
var popMargLeft = ($(popup).width() + 24) / 2;
$(popup).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.cross, #mask').live('click', function() {
$('#mask , #popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
HTML:
<p>Please take the time to look through my portfolio and if anything interests you or have any questions, please
Get In Touch.
Thank you
Upvotes: 0
Views: 798
Reputation: 2229
May be you want something like this...
HTML:
<div class="popup" id="someId">
<p class="arch-pop-msg">Please take the time to look through my portfolio and if anything interests you or have any questions, please</p>
</div>
JS:
$(".popup").dialog({ modal: true,
position : 'center',
width: 380,
height: 90,
autoOpen: false,
closeOnEscape: true,
resizable: false,
showTitlebar: false
});
CSS: add css as per your need
Upvotes: 1