I have in my project a popup into my body tag and have a several data-role pages.
On each page have a button when the user click open this popup.
My problem is that I can open the popup window, but this popup contains a bxslider gallery for images and this images don't show.
Here is my code:
<a href="#Paginasnocentro1234" data-rel="popup" data-icon="grid" data-iconpos="notext" class="ui-btn-right" data-inline="true" data-direction="reverse" style="margin-right:70px" data-transition="none" id="blabla">Paginas</a>
Script:
$(document).on('pagebeforeshow', '#p36', function () {
$('#Paginasnocentro1234').hide();
});
$(document).on('click', '#blabla', function () {
$('#Paginasnocentro1234').toggle();
Popup:
<div data-role="popup" id="Paginasnocentro1234" data-theme="a" style="top:45px;position:absolute">
<div class="slider">
<ul class="bxslider" id="paginacao">
<li><a href="#p1"><img src="imagens/paginas/1.jpg" /></a></li>
<li><a href="#p2"><img src="imagens/paginas/2.jpg" /></a></li>
<li><a href="#p3"><img src="imagens/paginas/3.jpg" /></a></li>
<li><a href="#p4"><img src="imagens/paginas/4.jpg" /></a></li>
<li><a href="#p5"><img src="imagens/paginas/5.jpg" /></a></li>
<li><a href="#p5"><img src="imagens/paginas/6.jpg" /></a></li>
<li><a href="#p5"><img src="imagens/paginas/7.jpg" /></a></li>
<li><a href="#p6"><img src="imagens/paginas/8.jpg" /></a></li>
<li><a href="#p7"><img src="imagens/paginas/9.jpg" /></a></li>
</ul></div>
</div>
In Chrome, right click and inspect element in pop-up where the images "should" be. Find out what rule is being over-written. From there you'll see how to fix it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.