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文件，还要更新样式。

如果这是样式的问题，那么您可以右键单击=＆gt; ispect元素，找到popover，看看为什么它不可见。

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

ons-popover没有显示内容

1 个答案: