itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-30 06:21:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing typos

Browse Source 
Inconsistent names were making these demos break.  This should clear things up.
This commit is contained in:
Ben Pate 2020-11-24 11:20:26 -07:00
parent c334768865
commit cdf4cab434
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
www/examples/modal-bootstrap.md
View File

@ -14,16 +14,16 @@ markup where the dialog will be loaded:
```html
<button
hx-get="/modal"
hx-target="#show-modals-here"
hx-target="#modals-here"
hx-trigger="click"
class="btn btn-primary"
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>
<div id="show-modals-here"></div>
<div id="modals-here"></div>
```
This button uses a `GET` request to `/modal` when this button is clicked. The
contents of this file will be added to the DOM underneath the `#show-modals-here` DIV.
contents of this file will be added to the DOM underneath the `#modals-here` DIV.
We're replacing Bootstrap's javascript widgets with a small bit of Hyperscript to provide
smooth animations when the dialog opens and closes.
@ -69,7 +69,7 @@ function closeModal() {
```
<div id="show-modals-here"></div>
<div id="modals-here"></div>
{% include demo_ui.html.liquid %}
@ -97,7 +97,7 @@ function closeModal() {
init("/demo", function(request, params) {
return `<button
hx-get="/modal"
hx-target="#show-modals-here"
hx-target="#modals-here"
bx-trigger="click"
class="btn btn-primary"
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>

12
www/examples/modal-uikit.md
View File

@ -17,15 +17,15 @@ This is an example of using HTMX to remotely load modal dialogs using UIKit.
<button
id="showButton"
hx-get="/uikit-modal.html"
hx-target="#show-modals-here"
hx-target="#modals-here"
class="uk-button uk-button-primary"
_="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal">Open Modal</button>
<div id="show-modals-here"></div>
<div id="modals-here"></div>
```
This button uses a `GET` request to `/uikit-modal.html` when this button is clicked. The
contents of this file will be added to the DOM underneath the `#show-modals-here` DIV.
contents of this file will be added to the DOM underneath the `#modals-here` DIV.
We're replacing the standard UIKit Javascript library with a little bit of Hyperscript,
which triggers UIKit's smooth animations. It is delayed by 10ms so that UIKit's animations
@ -75,13 +75,13 @@ window.document.getElementById("showButton").addEventListener("htmx:afterOnLoad"
window.document.getElementById("cancelButton").addEventListener("click", function() {
window.document.getElementById("modal").classList.remove("uk-open")
setTimeout(function(){
window.document.getElementById("show-modals-here").innerHTML = ""
window.document.getElementById("modals-here").innerHTML = ""
,200
})
})
```
<div id="show-modals-here"></div>
<div id="modals-here"></div>
{% include demo_ui.html.liquid %}
@ -102,7 +102,7 @@ window.document.getElementById("cancelButton").addEventListener("click", functio
class="uk-button uk-button-primary"
hx-get="/modal"
hx-trigger="click"
hx-target="#show-modals-here"
hx-target="#modals-here"
_="on htmx:afterOnLoad wait 10ms then add .uk-open to #modal">Show Modal Dialog</button>`
})