HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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.
If you need to add padding to the outside and from the pop can add "ui-content" category in the <div> in:
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 |
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. |
By default, the pop is no transition effect. If you want you can add transition effects (via data-transition = "value" attribute jQuery Mobile Transition ):
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):
You can pop produced as a standard dialog box (the head, and the contents of the bottom mark):
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:
General background image popups frequently overlay:
Note: In the next chapter, you will learn how to use the forms in pop.