jquery mobile popup - 按钮样式不正确，data-iconpos =“notext”，以及其他问题

Posted 2023-05-09

【中文标题】jquery mobile popup - 按钮样式不正确，data-iconpos =“notext”，以及其他问题

【英文标题】：jquery mobile popup - button not styling correctly with data-iconpos="notext", and other problems

【发布时间】：2013-06-04 06:34:48

【问题描述】：

我正在制作一个移动网络应用程序并且正在使用 jQuery Mobile。我在底部有一个导航栏，当您单击左按钮时，弹出窗口正确显示，但当我使用 data-iconpos="notext" 时，关闭按钮的样式不正确。这是我的代码：

    <div data-theme="j" data-role="footer" data-position="fixed">
        <div id="navbar" data-role="navbar" data-iconpos="bottom">
            <ul>
                <li id="navbar-menu-button">
                    <a href="#navbar-popup-menu" data-transition="slideup" data-position-to="window" data-rel="popup" data-theme="j" data-icon="bars" data-overlay-theme="j" data-dismissible="false"></a>

                    <div id="navbar-popup-menu" data-role="popup" class="ui-content">
                        <a id="navbar-menu-close-button" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" title="Close" data-dismissible="false" class="ui-btn-right"></a> 
                        test info
                    </div>
                </li>

                <li id="navbar-info-button">
                    <a href="#navbar-popup-info" data-transition="slide" data-position-to="window" data-rel="popup" data-theme="j" data-icon="info"></a>
                </li>
            </ul>
        </div>
    </div>

正如您在div#navbar-popup-menu 中看到的，我有一个<a> 标记，具有以下属性： data-role="button"、data-rel="back"、data-icon="delete"、data-iconpos="notext"、data-dismissible="false"、class="ui-btn-right"

除data-iconpos="notext" 和data-dismissible="false" 外，一切正常。按钮图标周围仍然有一个不应该存在的框，您仍然可以在弹出窗口之外单击以将其关闭。你可以在这里观看现场演示：DEMO

任何帮助将不胜感激。我一直在努力解决这个问题，因为我还有其他正在工作的按钮，它们之间没有什么不同可能导致发生的事情。

另外：关闭按钮不起作用

【问题讨论】：

data-dismissible="false" 应该只添加到弹出 div 中。不是关闭按钮。删除它，然后重试。

也在你的网站上data-rel="close"，它应该是back，就像你上面的代码一样。您是否覆盖 jQM CSS（不是主题）？

jsfiddle.net/Palestinian/qLFJ6 看看这个。

按照您的建议进行操作，并且按钮可以正常工作，这对我来说肯定是多余的，但按钮周围仍然有框，这不是所需的行为

如果您从按钮中删除data-theme，会发生同样的情况吗？

【参考方案1】：

当使用 jQuery Mobile Popup 时，popup div 的父 div 应该是 data-role=page 或 data-role=content。将它放在其他地方会与其他 div 冲突。此外，如果放在data-role=page之外，它也不起作用。

与Dialog不同，它应该放在data-role=page之外。