4

我正在使用simplemodal 插件和本教程从主页上的拇指弹出我的 wordpress 网站上的帖子。我一遍又一遍地阅读教程，无法弄清楚如何定位叠加层来设置它的样式。我还需要针对 simplemodal-container 来设置样式。本教程提供了此功能来调用弹出帖子。

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;
    });
});

simplemodal 插件说您可以使用 更改覆盖的样式，overlayCss [Object:{}]并使用 更改 simplemodal-container 的样式containerCss [Object:{}]。但是，我尝试将其放在此函数中的任何地方都会导致问题。我尝试在上面的函数下添加它，但它没有做任何事情。

jQuery("#ajax-popup").modal({
    opacity:80,
    overlayCss: {backgroundColor:"#000"},
    containerCss: {margin: "0 auto",top:0}
});

我做错了什么，我需要在哪里添加这个？

更新：好的，我到了某个地方，但容器 css 出于某种原因不会覆盖默认设置。

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;
    }); 
});
4

2 回答 2

1

弄清楚了。这是解决方案：

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;
    });
});
于 2012-05-07T11:49:01.640 回答
0

试试下面的：

.modalWrapper{
    margin: 0 auto;
    display:block;
    position:relative;
}
于 2012-04-09T17:19:17.900 回答