jQuery Mobile pop
Is a very popular pop dialog popups can be overlaid on the page display.
Pop-ups can be used to display a text, pictures, maps, or other content.
Create a pop, and the need to use <a> <div> element. Adding data-rel = "popup" property on <a> element, <div> element to add data-role = "popup" attribute. Then we specify id for the <div>, and then set the href value <a> <div> specified id. <Div> The content is content pop display.
Note: <div> pop and click <a> a link must be on the same page.
Examples
<Div data-role = "popup " id = "myPopup">
<P> This is a simple pop </ p>
</ Div>
try it"
If you need to add padding to the outside and from the pop can add "ui-content" category in the <div> in:
Close popup
By default, clicking pop outside area or press the "Esc" key to close the pop. If you do not want to tap the area outside of the pop Close popup can add data-dismissible = "false" attribute in the added (not recommended). You can also add the Close button on pop, using data-rel = "back" button on the property, and through the style to control the position of the button.
| description | Examples |
|---|---|
| Close button on the right side | try it |
| Close button on the left | try it |
| Using data-dismissible property | try it |
Positioning pop
By default, the popups will appear directly above click on the element, if you need to control the position of pop, you can use the data-position-to attribute for opening pop clicks on the link.
Control pop locations in three ways:
| Property Value | description |
|---|---|
| data-position-to = "window" | Popups displayed in the window center |
| data-position-to = "# myId" | Popups displayed on the known elements #id |
| data-position-to = "origin" | default. Click on the pop display elements. |
Examples
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> id = " demo" </a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> Origin </a>
try it"
transition
By default, the pop is no transition effect. If you want you can add transition effects (via data-transition = "value" attribute jQuery Mobile Transition ):
All instances of transition effects
try it"
Pop direction small border
If you need to add a little pop direction of the border, you can use the data-arrow property and specify the value "l" (left), "t" (top), "r" (on the right) or "b" (bottom):
Examples
<div data-role = "popup " id = "myPopup" class = "ui-content" data-arrow = "l">
<P> left border direction. </ P>
</ Div>
try it"
Pop dialog
You can pop produced as a standard dialog box (the head, and the contents of the bottom mark):
Examples
<Div data-role = "popup" id = "myPopupDialog">
<Div data-role = "header"> <h1> header text .. </ h1> </ div>
<Div data-role = "main" class = "ui-content"> <p> Some text .. </ p> <a href="#"> links .. </a>
<Div data-role = "footer"> <h1> at the bottom of the text .. </ h1> </ div>
</ Div>
try it"
Image pop
You can display the image in pop:Examples
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<Div data-role = "popup" id = "myPopup">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
try it"
Background pop cover
You can use the data-overlay-theme properties after pop add a background color.
By default, covering the background color transparent. Using data-overlay-theme = "a" to add a light background, use data-overlay-theme = "b" add dark cover the background:
Examples
<div data-role = "popup " id = "myPopup" data-overlay-theme = "b">
<P> Behind me there is a dark background. </ P>
</ Div>
try it"
General background image popups frequently overlay:
Examples
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<div data-role = "popup " id = "myPopup" data-overlay-theme = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; height: 400px;" alt = "w3big">
</ Div>
try it"
Note: In the next chapter, you will learn how to use the forms in pop.