mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

Tidy up popups docs

Browse Source
This commit is contained in:
Samuel Georges 2015-09-26 08:24:16 +10:00
parent 6e1194784a
commit b4fdf27023
1 changed files with 62 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
modules/system/assets/ui/docs/popup.md
View File

@ -1,13 +1,17 @@
# Popups
Displays a modal popup
Displays a modal popup, based on the Bootstrap modal implementation.
# Example
- [Examples](#examples)
- [Inline popups](#inline-popups)
- [Remote popups](#remote-popups)
<!-- Basic Popup -->
<a data-toggle="modal" href="#content-basic" class="btn btn-primary btn-lg">Launch basic content</a>
<a name="examples"></a>
## Examples
<div class="control-popup modal fade" id="content-basic" tabindex="-1" role="dialog">
<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">Launch basic content</a>
<div class="control-popup modal fade" id="contentBasic" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
@ -18,8 +22,6 @@ Displays a modal popup
</div>
</div>
<!-- Confirmation Popup -->
<a data-toggle="modal" href="#content-confirmation" class="btn btn-primary btn-lg">Launch Confirmation dialog</a>
<div class="control-popup modal fade" id="content-confirmation" tabindex="-1" role="dialog">
@ -41,5 +43,56 @@ Displays a modal popup
</div>
</div>
<!-- Ajax Popup -->
<a data-control="popup" data-ajax="popup-content.htm" href="javascript:;" class="btn btn-primary btn-lg">Launch Ajax Form</a>
<a name="inline-popups"></a>
## Inline popups
An inline popup places the popup content inside the current page, hidden from the view. For example, this container will not be visible on the page.
```html
<div class="control-popup modal fade" id="contentBasic">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<p>This is a very basic example of a popup...</p>
</div>
</div>
</div>
</div>
```
Use the `data-toggle="modal"` HTML attribute to launch this container as a popup.
```html
<a data-toggle="modal" href="#contentBasic" class="btn btn-primary btn-lg">
Launch basic content
</a>
```
<a name="remote-popups"></a>
## Remote popups
Content for the popup can be loaded remotely using an AJAX request. Use the `data-handler` attribute to populate a popup with the contents of an AJAX handler.
```html
<a
data-control="popup"
data-handler="onLoadContent"
href="javascript:;"
class="btn btn-primary btn-lg">
Launch Ajax Form
</a>
```
Using the `data-ajax` attribute you can refer to an external file or URL directly.
```html
<a
data-control="popup"
data-ajax="popup-content.htm"
href="javascript:;"
class="btn btn-primary btn-lg">
Launch Ajax Form
</a>
```