I am using a "Jquery Mobiles popup" for displaying ads, the code looks pretty much like this:
<div data-role="popup" id="adsPage" data-theme="b" class="ui-content">
<img id="x" src="@routes.Assets.at("images/x.png")" onclick="closeAd()"/>
<iframe id="adsFrame" src="/ads"></iframe>
</div>
The problem is this data-role = popup messes up my whole page. Always when another page is loading, suddenly the popup appears for a second, also messing with the whole layout of the pages.
I tried several solutions for this problem but none did work, so far.
Obviously I tried to use data-role = page first, but in this case the iframe wouldn't show any content
I tried to set the opacity to 0, and only setting it to 1 before opening it, this made half of all pages clickable with the href of the iframe content.
I also tried to set the display of the div to none, and only setting in to block before the popup was openend. In this case I couldn`t see any content when the ads was opened.
My last approach was to set the div initially to data-role = page and then
if( adCount >= 20 ) {
adCount = 0;
$( "#adsFrame" ).attr("data-role", "popup");
window.location.replace('#adsPage');
}
This didn`t work either, but I am not sure if the code is wrong.
So my question is, can I make the last solution work? Or can someone explain to me why the iframe wouldn't show any content when data-role = page is selected, and if I could fix this somehow? Or any other kind of solution comes to your mind?
Thanks for any piece of input in advance.
