4

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;
    }); 
});
jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
Pollux Khafra
  • 862
  • 5
  • 17
  • 32

2 Answers2

1

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;
    });
});
jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
Pollux Khafra
  • 862
  • 5
  • 17
  • 32
0

Try the below:

.modalWrapper{
    margin: 0 auto;
    display:block;
    position:relative;
}
Eric Hodonsky
  • 5,617
  • 4
  • 26
  • 36
  • That's already applied. It applies those setting to browser size on page load but doesn't auto resize. – Pollux Khafra Apr 09 '12 at 17:29
  • make sure that the wrapper can handle it, and the wrapper has to be display:block; as well, and position:relative or absolute; – Eric Hodonsky Apr 09 '12 at 21:52
  • The wrapper has that css. The outer container is fixed position to keep the popup in view while scrolling. So I think I need autoresize added with jquery but I have no idea how to do that. – Pollux Khafra Apr 09 '12 at 22:08
  • After you add the element you can access it with `jquery("#obj").css({'height': measuredHeight});` and do so for each property you need to effect. – Eric Hodonsky Apr 13 '12 at 22:43