itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 07:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleaner Bootstrap 5 modals example. (#1111)

Browse Source 
* Cleaner Bootstrap 5 example.

* Update window id

* Update close button

* Got it working
This commit is contained in:
Dominik Kozaczko 2023-08-01 21:41:17 +02:00 committed by GitHub
parent efb42e09cf
commit 193cb67393
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
www/content/examples/modal-bootstrap.md
View File

@ -4,8 +4,7 @@ template = "demo.html"
+++ +++
Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes.
This example shows how to use HTMX to display dynamic dialog using Bootstrap, and how to This example shows how to use HTMX alongside original JavaScript provided by Bootstrap.
trigger its animation styles in Javascript.
We start with a button that triggers the dialog, along with a DIV at the bottom of your We start with a button that triggers the dialog, along with a DIV at the bottom of your
markup where the dialog will be loaded: markup where the dialog will be loaded:
@ -15,77 +14,59 @@ markup where the dialog will be loaded:
hx-get="/modal" hx-get="/modal"
hx-target="#modals-here" hx-target="#modals-here"
hx-trigger="click" hx-trigger="click"
class="btn btn-primary" data-bs-toggle="modal"
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button> data-bs-target="#modals-here"
class="btn btn-primary">Open Modal</button>
<div id="modals-here"></div> <div id="modals-here"
class="modal modal-blur fade"
style="display: none"
aria-hidden="false"
tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content"></div>
</div>
</div>
``` ```
This button uses a `GET` request to `/modal` when this button is clicked. The 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 `#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 The server responds with a slightly modified version of Bootstrap's standard modal
smooth animations when the dialog opens and closes.
Finally, the server responds with a slightly modified version of Bootstrap's standard modal
```html ```html
<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div> <div class="modal-dialog modal-dialog-centered">
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;"> <div class="modal-content">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-header">
<div class="modal-content"> <h5 class="modal-title">Modal title</h5>
<div class="modal-header"> </div>
<h5 class="modal-title">Modal title</h5> <div class="modal-body">
</div> <p>Modal body text goes here.</p>
<div class="modal-body"> </div>
<p>Modal body text goes here.</p> <div class="modal-footer">
</div> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"">Close</button>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
</div>
</div>
</div>
</div> </div>
</div>
``` ```
We're replacing the standard Bootstrap Javascript library with a little bit of Javascript, <div id="modals-here"
which triggers Bootstrap's smooth animations. class="modal modal-blur fade"
style="display: none"
```javascript aria-hidden="false"
function closeModal() { tabindex="-1">
var container = document.getElementById("modals-here") <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
var backdrop = document.getElementById("modal-backdrop") <div class="modal-content"></div>
var modal = document.getElementById("modal") </div>
</div>
modal.classList.remove("show")
backdrop.classList.remove("show")
setTimeout(function() {
container.removeChild(backdrop)
container.removeChild(modal)
}, 200)
}
```
<div id="modals-here"></div>
{{ demoenv() }} {{ demoenv() }}
<script src="https://unpkg.com/hyperscript.org"></script>
<style> <style>
@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"; @import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css";
</style> </style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script> <script>
function closeModal() {
document.getElementById("modal").classList.remove("show")
document.getElementById("modal-backdrop").classList.remove("show")
setTimeout(function() {
document.getElementById("modals-here").innerHTML = ""
}, 200)
}
//========================================================================= //=========================================================================
// Fake Server Side Code // Fake Server Side Code
@ -94,30 +75,27 @@ function closeModal() {
// routes // routes
init("/demo", function(request, params) { init("/demo", function(request, params) {
return `<button return `<button
hx-get="/modal" hx-get="/modal"
hx-target="#modals-here" hx-target="#modals-here"
bx-trigger="click" hx-trigger="click"
class="btn btn-primary" data-bs-toggle="modal"
_="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button> data-bs-target="#modals-here"
class="btn btn-primary">Open Modal</button>
`}) `})
onGet("/modal", function(request, params){ onGet("/modal", function(request, params){
return `<div id="modal-backdrop" class="modal-backdrop fade" style="display:block;"></div> return `<div class="modal-dialog modal-dialog-centered">
<div id="modal" class="modal fade" tabindex="-1" style="display:block;"> <div class="modal-content">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-header">
<div class="modal-content"> <h5 class="modal-title">Modal title</h5>
<div class="modal-header"> </div>
<h5 class="modal-title">Modal title</h5> <div class="modal-body">
</div> <p>Modal body text goes here.</p>
<div class="modal-body"> </div>
<p>Modal body text goes here.</p> <div class="modal-footer">
</div> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button> </div>
</div>
</div>
</div>
</div>` </div>`
}); });
</script> </script>