ons-popoverがコンテンツを表示していません

Question

私のPhonegap Appでons-popoverを動作させることができません。ポップオーバーを表示するためにボタンをクリックすると、ページ全体が暗くなりますが、ページにはコンテンツが表示されません。以下は私が使っている簡単なページです。

<ons-page id="testPopCtrlerid" ng-controller="TestPopController" style="background-color: white; color: black" > 
    <section> 
     <br><br><br><br><br> 
     <div style="text-align: center"> 
      <div style="margin-top: 30px; text-align: center"> 
       <ons-button id="my-btn" modifier="light" ng-click="showPopOver('#my-btn')">Show popover</ons-button> 
      </div> 
     </div> 
    </section> 

    <ons-template id="popovert.html"> 
     <ons-popover modifier="android" direction="up down" cancelable> 
      <div style="text-align: center; opacity: 0.5; color: black; background-color: red; font-size: 10pt; z-index: 1000000"> 
       <p style="text-align: center; opacity: 0.5; color: black; background-color: red; font-size: 10pt; z-index: 1000000">This is a popover!</p> 
       <p style="text-align: center; color: black; background-color: red; font-size: 10pt; z-index: 1000000">Click the background to remove the popover.</p> 
      </div> 
     </ons-popover> 
    </ons-template> 

</ons-page> 


     app.controller('TestPopController', function ($scope) { 
      ons.createPopover('popovert.html').then(function(popover) { 
       $scope.popover = popover; 
      }); 

      $scope.showPopOver = function(e) { 
       $scope.popover.show(e); 
      }; 
     }); 

Answer 1

あなたが提供しているコードには特に問題はないようです。

あなたが問題を説明している方法は、CSSの問題のように聞こえます。あなたがあなたのスタイルのいくつかでポップオーバーを隠していないことを確認してください。

ここにはコードのworking demoがあります。

デモはOnsen 2.beta.7で行われました。場合によってはあなたのバージョンを更新することができます。最近更新したことがあっても、jsファイルだけでなくスタイルも更新することを忘れないでください。

スタイルの問題であれば、=> ispect要素を右クリックして、ポップオーバーを見つけて、それが見えない理由を確認することができます。

アンドロイドでタグ付けしているので、アンドロイドでテストしているときにのみ問題が発生しますか？