https://github.com/serbanghita/jqm-dynamic-popup
Lightweight jQuery Mobile plugin based on the popup() method that allows creation of dynamic popups.
https://github.com/serbanghita/jqm-dynamic-popup
Last synced: 6 months ago
JSON representation
Lightweight jQuery Mobile plugin based on the popup() method that allows creation of dynamic popups.
- Host: GitHub
- URL: https://github.com/serbanghita/jqm-dynamic-popup
- Owner: serbanghita
- License: other
- Created: 2013-09-24T18:07:59.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2016-03-01T17:23:54.000Z (over 9 years ago)
- Last Synced: 2025-04-11T04:35:59.919Z (6 months ago)
- Language: JavaScript
- Size: 254 KB
- Stars: 9
- Watchers: 7
- Forks: 16
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
`$.dynamic_popup()` is a lightweight jQuery Mobile plugin based on the `popup()` function available since 1.2 alpha release. It enables you to create a *dynamic popup* without stressing you with details where to put the actual HTML code. This is extremely useful if you have *many dynamic pages* in your *jQuery Mobile web application*.
##### Example
Include the required files:
```html
```
Simple text alert:
```javascript
$.dynamic_popup('This is a basic help message. Did you get it?');
```
Add HTML and events to your popups:
```javascript
$.dynamic_popup('Enter your name and email before submitting the form.');
$.dynamic_popup({
content: '
' + $('#name').val() + ', you have successfully registered!' + '
',
'data-transition': 'slideup',
'data-position-to': '#Register'
})
.bind({
popupafteropen: function(e){
console.log('Opened the popup!');
},
popupafterclose: function(e){
$.mobile.changePage('#thankyouPage');
}
});
```
##### Configuration
```javascript
// Default configuration.
$.dynamic_popup({
content: '',
popupId: 'popup' + $activePage.attr('id'),
'data-theme': 'a',
'data-overlay-theme': 'none',
'data-position-to': 'window',
'data-rel': 'back',
'data-dismissible': true,
'data-transition': 'none',
'data-arrow': false
});
```
You can find more about these configuration options on the official jQuery mobile popup docs: http://demos.jquerymobile.com/1.4.2/popup/
##### Contribute
Add an issue or fork the project and submit a pull request.
If this script helped you save a lot of developing time, I really appreciate any donations
. Thank you!