Menu
I wonder how showing and hiding of a modal dialog should be implemented with Om or Reagent. Since my UI is a function on the state, the show/hide should be triggered by a property in this state.
But frameworks like Bootstrap require to call some JavaScript to show/hide dialogs.
Is there any common solution for this problem?
694
You CAN include a modal within a form. In the Bootstrap documentation it recommends the modal to be a "top level" element, but it still works within a form. You create a form, and then the modal "save" button will be a button of type="submit" to submit the form from within the modal.
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class. Save this answer.
This dialog disables the main content until the user explicitly interacts with the modal dialog. A modal dialog is like my cat, Emma — who meows at 7am every morning to prompt me to feed her.
On each of your <tr> 's add a data attribute for id (i.e. data-id ) with the corresponding id value and specify a data-target , which is a selector you specify, so that when clicked, bootstrap will select that element as modal dialog and show it.
Don't use javascript or jquery effects to show/hide dialogs in Om or Reagent. Instead, make the value of an atom determine whether the modal dialog should be shown. Here is an example for Reagent:
[(fn [shown]
(if shown
[:div.jumbotron.modal-background
{:on-click #(reset! popup-shown false)}
[:div.alert.alert-info
[:div "Hello!"]]]
[:div]))
@popup-shown]
Have a look at re-com. It certainly shows one way of doing it. https://github.com/Day8/re-com
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
