Jquery Mobile Popup

**fazpedro** · 05/07/2012, 15h06

Bonjour,

j'essaie d'avoir en fenêtre une "Popup" en Jquery Mobile comme ceci :
http://mobile.jquery-fr.com/docs/pages/popup/

mais cela ne fonctionne pas !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<body class="ui-mobile-viewport">
<div data-role="page" data-theme="a"><!-- DEBUT de page principale -->
<div data-role="content" data-theme="b"><!-- Contenu principal -->
<h2>TEST POPUP</h2>
<a href="#popupBasic" data-rel="popup">Ouvrir Popup</a>
<div data-role="popup" id="popupBasic">
	<p>Ceci est un texte dans la fenetre Pop Up !<p>
</div>
</div><!-- FIN Contenu principal -->
</div><!-- FIN de page principale -->
</body>

=> le texte s'affiche avant même de cliquer sur "Ouvrir Popup"... !

j'ai essayé en le mettant plus bas comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<a href="#popupBasic" data-rel="popup">Ouvrir Popup</a>
 
</div><!-- FIN Contenu principal -->
</div><!-- FIN de page principale -->
 
<div data-role="popup" id="popupBasic">
	<p>Ceci est un texte dans la fenetre Pop Up !<p>
</div>

=> Quand je clique, il m'ouvre une nouvelle page .../#popupBasic !

Merci !

**fazpedro** · 13/07/2012, 12h03

Bonjour,

J'ai trouvé !

Voilà le code qui fonctionne bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
<body class="ui-mobile-viewport ui-overlay-c">
<div role="main" data-role="content" class="ui-body ui-content">
<div data-role="content" data-theme="b"><!-- Contenu principal -->
<h2>TEST POPUP</h2>
 
<a class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-c" aria-owns="#popupBasic" 
aria-haspopup="true" data-theme="c" data-wrapperels="span" data-iconshadow="true" data-shadow="true" 
data-corners="true" href="#popupBasic" data-rel="popup" data-role="button" data-inline="true">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Ouvrir le Popup</span></span></a>
<div style="display: none;"></div>
<div style="height: 4604px;" class="ui-popup-screen fade ui-screen-hidden"></div>
<div data-transition="pop" data-corners="true" data-shadow="true" aria-disabled="false" class="ui-popup" data-role="popup" id="popupBasic">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Fermer</a>
<p>Ceci est un texte dans la fenetre Pop Up !</p>
</div>
 
</div><!-- FIN Contenu principal -->
</div><!-- FIN de page principale -->
</body>

Jquery Mobile Popup [UI Mobile]

jQuery

Vue hybride

Discussions similaires

Partager

Partager