jquery mobile popup - button not styling correctly with data-iconpos=“notext”, and other problems
I am making a mobile web app and am using jQuery Mobile. I have a navbar at the bottom and when you click the left button the popup shows correctly but the close button is not being styled correctly when i use
data-iconpos="notext". Here is my code:
- <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>
As you can see in `div#navbar-popup-menu` I have an `<a>` tag with the following attributes:
data-role="button",
data-rel="back`,
data-icon="delete",
data-iconpos="notext",
data-dismissible="false", and
class="ui-btn-right"
everything is working except data-iconpos="notext" and data-dismissible="false". There is still a box around the button icon which shouldn't be there and you can still click outside of the popup to close it. you can view a live demo here:
DEMO
any help would be greatly appreciated. I've been pulling my hair out trying to figure this out because i have other buttons that are working and nothing is different between them that could cause what's happening.
ALSO: The close button is not closing the popup