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 form popup 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>
Example: We will create a form inside a popup. When we click on button, it opens a form.
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< h4 >
Design Form popup using jQuery Mobile
</ h4 >
< a href = "#FormDesign" data-rel = "popup" data-position-to = "window"
class="ui-btn ui-corner-all ui-shadow
ui-btn-inline ui-icon-check
ui-btn-icon-left ui-btn-a"
data-transition = "pop" >Form
</ a >
< div data-role = "popup" id = "FormDesign" data-theme = "a" class = "ui-corner-all" >
< form >
< div style = "padding:10px 20px;" >
< h3 >GeeksforGeeks Login Form</ h3 >
< label for = "un" class = "ui-hidden-accessible" >
First Name:
</ label >
< input type = "text" name = "user" id = "un" value = "" placeholder = "Enter First Name" data-theme = "a" >
< label for = "un" class = "ui-hidden-accessible" >
Last Name:
</ label >
< input type = "text" name = "user" id = "un" value = ""
placeholder = "Enter Last Name" data-theme = "a" >
< label for = "un" class = "ui-hidden-accessible" >
Username:
</ label >
< input type = "text" name = "user" id = "un" value = ""
placeholder = "Enter Username" data-theme = "a" >
< label for = "pw" class = "ui-hidden-accessible" >
Password:
</ label >
< input type = "password" name = "pass" id = "pw" value = ""
placeholder = "Enter Password" data-theme = "a" >
< label for = "pw" class = "ui-hidden-accessible" >
Confirm Password:
</ label >
< input type = "password" name = "pass" id = "pw" value = "" placeholder = "Enter Confirm Password"
data-theme = "a" >
< button type = "submit"
class="ui-btn ui-corner-all ui-shadow
ui-btn-b ui-btn-icon-left ui-icon-check">
Sign UP
</ button >
</ div >
</ form >
</ div >
</ center >
</ body >
</ html >
|
Output: