How to create a Transitions popup using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a transition popup button using jQuery Mobile.
Approach: Add jQuery mobile scripts needed for your project.
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
The popup element does not contain any kind of transition. The transition can be added to popup element by adding the data-transition attribute to the link that references the popup. The reverse transition is used for closing the popup.
Example 1:
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> < script src = "http://code.jquery.com/jquery-1.11.1.min.js" > </ script > < script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" > </ script > </ head > < body > < center > < h1 >w3wiki</ h1 > < h4 > Design a Transitions Popup using jQuery Mobile </ h4 > < a href = "#GFGTransition" data-transition = "none" class = "ui-btn ui-corner-all ui-btn-inline" data-rel = "popup" > No transition </ a > < a href = "#GFGTransition" data-transition = "fade" class = "ui-btn ui-corner-all ui-btn-inline" data-rel = "popup" >Fade</ a > < a href = "#GFGTransition" data-transition = "pop" class = "ui-btn ui-corner-all ui-btn-inline" data-rel = "popup" >Pop</ a > < a href = "#GFGTransition" data-transition = "turn" class = "ui-btn ui-corner-all ui-btn-inline" data-rel = "popup" >Turn</ a > < a href = "#GFGTransition" data-transition = "flip" class = "ui-btn ui-corner-all ui-btn-inline" data-rel = "popup" >Flip</ a > < div data-role = "popup" id = "GFGTransition" class = "ui-content" data-theme = "a" > < p >It is an example of popup transition.</ p > </ div > </ center > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> < script src = "http://code.jquery.com/jquery-1.11.1.min.js" > </ script > < script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" > </ script > </ head > < body > < center > < h1 >w3wiki</ h1 > < h4 > Design a Transitions Popup using jQuery Mobile </ h4 > < a href = "#GFGTransition" data-transition = "flow" class = "ui-btn ui-btn-inline" data-rel = "popup" >Flow</ a > < a href = "#GFGTransition" data-transition = "slide" class = "ui-btn ui-btn-inline" data-rel = "popup" >Slide</ a > < a href = "#GFGTransition" data-transition = "slidefade" class = "ui-btn ui-btn-inline" data-rel = "popup" >Slidefade</ a > < a href = "#GFGTransition" data-transition = "slideup" class = "ui-btn ui-btn-inline" data-rel = "popup" >Slide up</ a > < a href = "#GFGTransition" data-transition = "slidedown" class = "ui-btn ui-btn-inline" data-rel = "popup" >Slide down</ a > < div data-role = "popup" id = "GFGTransition" class = "ui-content" data-theme = "a" > < p >It is an example of popup transition.</ p > </ div > </ center > </ body > </ html > |
Output: