I'm using the simplemodal plugin along with this tutorial to popup posts on my wordpress site from thumbs on the homepage. I've read through the tutorials over and over and can't figure out how to target the overlay to style it. I also need to target the simplemodal-container aswell to style that. The tutorial gives this function to call a popup post.
jQuery(document).ready(function() {
jQuery('a.postpopup').click(function(){
id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('http://urlofyoursite.com/ajax-handler/?id='+id).modal();
return false;
});
});
The simplemodal plugin says you can change the style of the overlay by using overlayCss [Object:{}]
and change the style of the simplemodal-container using containerCss [Object:{}]
. However, anywhere I try to place that in this function causes issues. I tried adding this under the function above, but it doesn't do anything.
jQuery("#ajax-popup").modal({
opacity:80,
overlayCss: {backgroundColor:"#000"},
containerCss: {margin: "0 auto",top:0}
});
What am I doing wrong and where I do I need to add this?
Update: Ok Im getting somewhere but the container css won't override the default setting for some reason.
jQuery(document).ready(function() {
jQuery('a.postpopup').live('click', function(){
var id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('http://fameordie.com/ajax-handler/?id='+id).modal({
opacity:90,
containerCss:{
top:0
},
overlayClose:true
});
return false;
});
});
Figured it out. Here is the solution:
jQuery(document).ready(function() {
jQuery('a.postpopup').live('click', function(){
var id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('http://fameordie.com/ajax-handler/?id='+id).modal({
opacity:90,
position: ["0%"],
overlayClose:true
});
return false;
});
});