Bulma: [Docs] Modal - example javascript toggle
It's about docs -> http://bulma.io/documentation/components/modal/
I think that it should contain example javascript toggle.
ghost
All 12 comments
Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself
As bulma does not include js, I believe adding javascript code to the docs would be more confusing than helping.
AntonyGarand
on 18 Apr 2017
I think that it is already confusing when framework calls itself "without javascript" but includes elements that won't work without it!
ghost
on 19 Apr 2017
It does work without javascript, but it is static: You can add the is-active class at load time and the modal window will indeed work.
AntonyGarand
on 19 Apr 2017
It's easy enough to toggle the is-active class on the modal div.
But – and I only found this out after reading the source of the JavaScript bundle on the docs site – you also need to toggle the is-clipped class on the <html> element to stop the page underneath scrolling when you try to scroll in the modal.
It would be great to add that to the docs.
airblade
on 27 Apr 2017
@airblade Do you mind providing a code sample? I am actually trying to accomplish the same thing you and others are explaining. Having a little trouble.
getromandev
on 27 Apr 2017
@iamromanh Assuming you have a link which opens your modal, e.g.:
<a id="open-modal" href="">Open modal</a>
This ES5 JavaScript (or similar, I just typed it out without testing) should open it:
```js
document.querySelector('a#open-modal').addEventListener('click', function(event) {
event.preventDefault();
var modal = document.querySelector('.modal'); // assuming you have only 1
var html = document.querySelector('html');
modal.classList.add('is-active');
html.classList.add('is-clipped');
modal.querySelector('.modal-background').addEventListener('click', function(e) {
e.preventDefault();
modal.classList.remove('is-active');
html.classList.remove('is-clipped');
});
});
airblade
on 27 Apr 2017
I really appreciate the design decision to keep this a javascript-free framework.
Here's how you might toggle classes in Elm,
In the View...
navToggler : Bool -> Html Msg
navToggler activeMenu =
span
[ class <| "nav-toggle" ++ (isActive activeMenu), onClick MainMenuToggle ]
[ span [] []
, span [] []
, span [] []
]
isActive : Bool -> String
isActive active =
if active then
" is-active"
else
""
And then in the Update...
MainMenuToggle ->
( { model | isMenuActive = not model.isMenuActive }, Cmd.none )
nqthqn
on 5 May 2017
My Implmentation using html5 data-attributes and jquery.
Html
<a class="open-modal" data-modal-id="#my-modal">Open My Modal</a>
<div aria-hidden="" class="modal" id="my-modal">
<div class="modal-background close-modal" data-modal-id="#my-modal"></div>
<div class="modal-content">
</div>
<button aria-label="close" class="delete close-modal" data-modal-id="#my-modal"></button>
</div>
Javascript
function toggleModalClasses(event) {
var modalId = event.currentTarget.dataset.modalId;
var modal = $(modalId);
modal.toggleClass('is-active');
$('html').toggleClass('is-clipped');
};
$('.open-modal').click(toggleModalClasses);
$('.close-modal').click(toggleModalClasses);
raman162
on 21 Aug 2017
Hi there. If you need some help with javascript events, I created a basic class. Maybe this will help you.
For example HTML code;
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close" data-bulma-modal="close"></button>
</header>
<section class="modal-card-body">
<p>There is something here</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button" data-bulma-modal="close">Cancel</button>
</footer>
</div>
</div>
<button id="btn">Click for Modal</button>
For Example JS Code;
class BulmaModal {
constructor(selector) {
this.elem = document.querySelector(selector)
this.close_data()
}
show() {
this.elem.classList.toggle('is-active')
this.on_show()
}
close() {
this.elem.classList.toggle('is-active')
this.on_close()
}
close_data() {
var modalClose = this.elem.querySelectorAll("[data-bulma-modal='close'], .modal-background")
var that = this
modalClose.forEach(function(e) {
e.addEventListener("click", function() {
that.elem.classList.toggle('is-active')
var event = new Event('modal:close')
that.elem.dispatchEvent(event);
})
})
}
on_show() {
var event = new Event('modal:show')
this.elem.dispatchEvent(event);
}
on_close() {
var event = new Event('modal:close')
this.elem.dispatchEvent(event);
}
addEventListener(event, callback) {
this.elem.addEventListener(event, callback)
}
}
var btn = document.querySelector("#btn")
var mdl = new BulmaModal("#myModal")
btn.addEventListener("click", function () {
mdl.show()
})
mdl.addEventListener('modal:show', function() {
console.log("opened")
})
mdl.addEventListener("modal:close", function() {
console.log("closed")
})
aligoren
on 20 Aug 2018
Also, In looking for the same thing you were. I found this:
bulma-modal-with-javascript ( searched google)
Ickorus
on 12 Nov 2018
re: @aligoren ... nice! and on my birthday, too. A great present =)
jeturcotte
on 22 Mar 2019
The navbar page in the documentation has a JavaScript example, why can't this? I don't want to spend my time learning JavaScript (I already know how, but as an example) just to get a modal working! What if I'm just building a simple single-page blog, and don't know any JS?
Nomkid
on 22 Oct 2020
Related issues
swamikevala
·
3Comments
rogervila
·
3Comments
jaredreich
·
3Comments
NurdinDev
·
3Comments
leofontes
·
3Comments
Most helpful comment
I think that it is already confusing when framework calls itself "without javascript" but includes elements that won't work without it!