Question

我正在使用JQM 1.3.1并且我有一个包含多个弹出窗口的页面（弹出窗口位于页面底部）：

<div data-role="page" data-title="Strategic Plans">
    <div data-role="content" id="capbPlans" data-bind="cafeLiveScroll: { callback: getMorePlans, threshold: 0.5 }">

        <!-- ko2 foreach:planGroups -->
        <section data-bind="cafeExpand: {}">
            <h3 data-bind="text: name"></h3>

            <!-- ko if: $root.auth.isAllowCreate() -->
            <div class="capbPlan capbInvite capbClosed" data-bind="click: function(o,e) { $(e.target).removeClass('capbClosed').find( 'textarea' ).focus(); }" title="Add new Plan">
                <textarea data-bind="value: invite, event: {keypress: createPlan}, valueUpdate: 'afterkeydown'" placeholder="Enter a name for your strategic plan" aria-label="Name" maxlength="100"></textarea>
                <div>
                    <a href="#" class="capbBtn capbBtnCancel" data-bind="click: function(o,e) { $(e.target).parent().parent().addClass('capbClosed').find( 'textarea' ).val('').blur(); }">Cancel</a>
                    <a href="#" class="capbBtn" data-bind="click: createPlan">Save</a>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko foreach: plans -->
            <div data-bind="click: $root.goPlan, attr:{ 'class': 'capbPlan capbPlanPhase' + strategyPhase.id }">
                <!-- ko if: $root.auth.isAllowCreate() -->
                <a href="#" class="copyIcon" title="Copy" data-bind="click: function(o,e){$root.selectedPlan(o);var a=$(e.target), m = $('#capbPlansMenu');$.Event(e).stopPropagation(); m.popup('open', {x: a.offset().left + m.outerWidth() / 2 + 5, y: a.offset().top + 35 })}"><div class="cafeImg capbIconMenu"></div></a>
                <!-- /ko -->
                <h2 data-bind="text: name"></h2>
                <p data-bind="text: description" class="desc"></p>
                <p data-bind="text: phase, attr:{ 'class': 'phase ' + phase }"></p>
                <footer>
                    <div data-bind="cafeUser: assignedTo" title="Owned by"></div>
                    <div data-bind="text: $root.i18n.format(modifiedOn, 'd')" title="Last modify"></div>
                </footer>
            </div>
            <!-- /ko -->
        </section>
        <!-- /ko2 -->
        <div id="capbPlansMenu" data-role="popup" class="capbPlansMenu" data-corners="false" data-position-to="origin">
            <ul>
                <li data-bind="click: function(o,e){ $('#capbPlansMenu').popup('close'); $root.copyPlan(o); }"><a href="#">Copy</a></li>
            </ul>
        </div>
        <!-- ko if: $root.confirm -->
<div id="capbConfirm" data-role="popup" class="capbConfirmPopup" data-transition="fade" data-bind="with: $root.confirm">
    <h3 data-bind="text: title"></h3>
    <!-- ko if: $data.question -->
    <p data-bind="text: question"></p>
    <!-- /ko -->
    <!-- ko if: $data.item -->
    <p data-bind="text: item"></p>
    <!-- /ko -->
    <div class="capbBtns">
        <a href="#" class="capbBtn capbBtnCancel" data-rel="back">Cancel</a>
        <a href="#" class="capbBtn" data-bind="click: confirmed">Continue</a>
    </div>
</div>
<!-- /ko -->
    </div>
</div>

它在chrome上工作正常，但在FF中打开时，弹出窗口会立即显示，因为页面打开并挂在页面顶部（相互堆叠）。

我检查了弹出容器，我可以看到在chrome上给出了这个类：ui-popup-hidden，它将其顶部/左侧属性设置为-9999并基本上隐藏它。

在FF上我看到它正在取代ui-selectmenu-hidden，这没有效果。

请帮助我，我现在已经敲了几个小时。

Answer 1

我不知道为什么，但清除FF缓存有帮助！问题消失了。

JQM弹出窗口在firefox上无法正常工作

1 个答案: