SimpleModalポップアップポストの要素をターゲットにする方法

Question

私はこのtutorialと一緒にsimplemodal pluginを使用して、ホームページの親指からWordPressサイトのポップアップをポップアップします。チュートリアルを何度も読んだことがあります。オーバーレイのスタイルを設定する方法を理解できません。私はシンプルモールドコンテナもそれをスタイルするためにターゲットにする必要があります。このチュートリアルでは、この機能を使用してポップアップポストを呼び出します。

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:{}]を使用してオーバーレイのスタイルを変更してcontainerCss [Object:{}]を使用してsimplemodalコンテナのスタイルを変更することができますと言います。しかし、どこでもこの関数に配置しようとすると、問題が発生します。上記の関数でこれを追加しようとしましたが、何もしません。

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

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

Answer 2

以下試してみてください。

.modalWrapper{ 
    margin: 0 auto; 
    display:block; 
    position:relative; 
}