javascript - ons-popover 不显示内容

Question

我无法让 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);
            };
        });

Answer 1

您提供的代码中似乎没有任何具体问题。

您解释问题的方式听起来像是 css 问题。确保您没有使用某些样式隐藏弹出窗口。

这是一个working demo您提供的代码。

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

如果这是样式问题，那么您可以右键单击 => 检查元素，找到弹出框并查看它不可见的原因。

此外，既然你用 android 标记它，这是否意味着只有当你在 android 上测试时才会出现问题？