WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Popups


jQuery Mobile Popups

Popups are like discoursed, in that they both overlay a piece of a page. A popup box can be valuable when you need to show little content, photographs, maps or other content.

To make a popup, begin with a <a> component and a <div> component. Include the information rel="popup" credit to <a>, and the information role="popup" ascribe to <div>. At that point indicate an id for <div>, and set the href of <a> to coordinate the predetermined id. The content inside <div> is the genuine substance that will spring up when a client taps on the link.

Note: The popup <div> must be inside a similar page as the link.

Example

<a href="#myPopup" information rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

<div information role="popup" id="myPopup">
  <p>This is a straightforward popup.</p>
</div>
Try it yourself »

If you need some additional cushioning and edge in your popup box, include the "ui-content" class to <div>:

Example

<div information role="popup" id="myPopup" class="ui-content">
Try it yourself »

Closing Popups

By default, popups can be shut either by clicking outside the popup box or by squeezing the "Esc" key. On the off chance that you don't need the popup to be closable by clicking fresh, you can include the information dismissible="false" ascribe to the popup (not so much prescribed). You can likewise add a nearby catch to the popup, put either right or left. To do as such, include a catch interface with the information rel="back" property into the popup holder, and position the catch by CSS classes.

Description Example
Right close button Try it
Left close button Try it
Undismissible Popup Try it

Positioning Popups

By default, popups will show up legitimately over the clicked component. To control the situation of the popup, utilize the information position-to characteristic on the connection that is utilized to open the popup.

There are three different ways of situating the popup:

Attribute value Description
data-position-to="window" Popup will seem focused inside the window
data-position-to="#myId" Popup is situated over the component with a predefined #id
data-position-to="origin" Default. Popup is situated legitimately over the clicked element

Example

<a href="#myPopup1" information rel="popup" class="ui-btn" data-position-to="window">Window</a>
<a href="#myPopup2" information rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" information rel="popup" class="ui-btn" data-position-to="origin">Origin</a>
Try it yourself »

Transitions

By default, popups don't have any change impacts added to them. You can utilize any of the impacts that we presented in the "Transitions" part. Just apply the information transition="value" credit to the connection that opens the popup:

A exhibition of all accessible change effects

<a href="#myPopup" information rel="popup" class="ui-btn" data-transition="fade">Fade</a>
Try it yourself »

Popup Arrows

To add a bolt to the popup's outskirt, utilize the information bolt property, and determine the esteem "l" (left), "t" (top), "r" (right) or "b" (bottom):

Example

<a href="#myPopup" information rel="popup" class="ui-btn">Open Popup</a>

<div information role="popup" id="myPopup" class="ui-content" data-arrow="l">
  <p>There is a bolt on my LEFT border.</p>
</div>
Try it yourself »

Popup Dialogs

You can include standard discourse markup into a popup (header, substance and footer markup):

Example

<a href="#myPopupDialog" information rel="popup" class="ui-btn">Open Dialog Popup</a>

<div information role="popup" id="myPopupDialog">
  <div information role="header"><h1>Header Text..</h1></div>
  <div information role="main" class="ui-content"><p>Some text..</p><a href="#">some links..</a>
  <div information role="footer"><h1>Footer Text..</h1></div>
</div>
Try it yourself »

Popup Photos

You can likewise show pictures in a popup:

Example

<a href="#myPopup" information rel="popup" information position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>

<div information role="popup" id="myPopup">
  <img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
Try it yourself »

Note: Popups are not perfect when you have an entire arrangement of pictures that you need to show (like a collection with 500 pictures). Be that as it may, for two or three pictures that should be seen bigger - they are perfect.


Popup overlay

You can control the foundation shading behind the popup (the page itself) with the information overlay-topic attribute.

By default the overlay is straightforward. Use information overlay-theme="a" to include a light overlay and information overlay-theme="b" to include a dim overlay:

Example

<a href="#myPopup" information rel="popup">Show Popup</a>

<div information role="popup" id="myPopup" data-overlay-theme="b">
  <p>I have a dim foundation behind me.</p>
</div>
Try it yourself »

The overlay impact is regularly utilized on popup photos:

Example

<a href="#myPopup" information rel="popup" information position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>

<div information role="popup" id="myPopup" data-overlay-theme="b">
  <img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
Try it yourself »

Note: You will likewise figure out how to utilize popups in structures and rundown sees in later chapters.