弹窗没有显示内容

I cannot get the ons-popover to work on my Phonegap App. When I click on the button to show a popover the entire page dims but no content shows on the page. Below is the simple page I am using.

我无法让ons-popover在我的Phonegap应用上运行。当我点击按钮显示整个页面的弹出窗口时，页面上没有显示内容。下面是我正在使用的简单页面。

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

1 个解决方案

#1

There doesn't seem to be any specific problem in the code which you are giving.

在您提供的代码中似乎没有任何特定的问题。

The way which you are explaining the problem it sounds like a css issue. Make sure that you are not hiding the popover with some of your styles.

你解释这个问题的方式听起来像是css的问题。确保您没有隐藏弹出窗口与您的一些风格。

Here is a working demo of the code which you have given.

这是您给出的代码的一个工作演示。

The demo has been made with Onsen 2.beta.7. You could update your version just in case. Also if you did some update recently don't forget to update not only the js files, but the styles too.

演示由Onsen 2.beta.7制作。你可以更新你的版本以防万一。另外，如果您最近进行了一些更新，请不要忘记不仅更新js文件，还要更新样式。

If it is an issue of the styles then you could right click => ispect element, find the popover and see why it's invisible.

如果是样式的问题，那么可以右键单击=> ispect元素，找到弹出窗口，看看为什么它是不可见的。

Also since you tagged it with android does that mean that the problem occurs only when you're testing on android?

既然你给它贴上了android标签，这是否意味着问题只会发生在你在android上测试的时候?

#1