Popup - Strange partial opacity in background
Well,
I have some problems with popup.
In some pages there is no any problem. In others, the
opacity
background (overlay) of popup is applied partially.
See the picture in annex.
This is really strange, because i search in another page without this problem, and html is the same (looked for unclose tags).
see my html:
- <script id=dtl_product_establishment type="text/x-handlebars-template">
- <div data-role="header" class="put-panel" data-position="fixed" data-tap-toggle="false">
- <h1>{{establishment.display_name}}</h1>
- <a href="#nav-panel" class="btn-panel" data-icon="bars">Menu</a>
- <a data-icon="back" class="cz-back ui-btn-right" data-rel="back">Voltar</a>
- <div data-role="navbar">
- <ul>
- <li><a class="vclick" id="header_product_menu" href="#category/{{backParams}}">Produtos<br /><i class="fa fa-book fa-2x"></i></a></li>
- <li><a href="#establishment/info" class="open_info_establishment vclick">Sobre<br /><i class="fa fa-info fa-2x"></i></a></li>
- <li class="carttab"><a class="vclick" href="#cart">Carrinho<br /><i class="fa fa-shopping-cart fa-2x"></i><span class="ui-li-count" style="margin-top:-3px">0</span></a></li>
- </ul>
- </div>
- </div><!-- /header -->
- <div role="main" class="ui-content">
- <div class="ui-corner-all ui-body-a">
- <div class="ui-bar ui-bar-a">
- <h4>{{prod.name}}</h4>
- </div>
- <div class="product-control ui-body ui-body-a">
- <div class="ui-grid-solo">
- <img width="100%" height="auto" src="data:image/jpeg;base64,{{prod.images}}" />
- </div>
- <p>{{prod.description.normal}}</p>
- <hr />
- <form id="form_tocart">
- <small>Valor Unitário: R$ {{formatCurrency prod.price}}</small>
- <span style="display:none" id="hidden_price">{{prod.price}}</span>
- <br />
- <small style="color:red">Valor: R$ <span id="formatCurrency">{{formatCurrency prod.price}}</span></small>
- <input type="hidden" name="id_product" value="{{prod._id}}"/>
- <input type="hidden" name="obs_prod" id="obs_prod" />
- <input data-role="spinBox" name="qt_product" id="qt_product" type="number" data-wrapper-class="controlgroup-textinput ui-btn" value="1" />
- <a id="addcart" class="ui-icon-check ui-btn ui-btn-icon-left ui-shadow ui-btn-icon-notext">Adicionar</a>
- </form>
- </div>
- </div>
- <div data-role="popup" id="popupCart" data-overlay-theme="a" data-theme="a" data-dismissible="false" class="ui-corner-all">
- <div data-role="header" data-theme="a">
- <h1>Confirmação</h1>
- </div>
- <div role="main" class="ui-content">
- <p>Deseja realmente inserir este produto em seu carrinho?</p>
-
- <small>Observações / Pedido Especial</small>
- <input type="text" id="popup_obs_prod"/>
- <a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">Cancelar</a>
- <a id="addToCart" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">Sim</a>
- </div>
- </div><!-- popup -->
- </div><!-- /content -->
- </script>
Javascript call
$(document).on("vclick","#addcart",function(e){
$("#popupCart").popup("open",{transition:"pop"});
});
OBS: page div is create via javascript, and wrap the code above.
What do you think?
EDIT: Using: jQuery mobile 1.4.2 jQuery v2.0.3
Test in firefox = ok.
Test in Android 4.2.2 Grand Duos = fail.
Thanks!