This Stack overflow question gives a whole bunch of implementations for this but they do use JQuery which I wanted to avoid. So, I am declaring it job done! Useful Links However, I’ve got a paid job to do and a daughter who is insisting that I play Minecraft with her (which is what passes for parenting these days). I could spend more time playing around with the CSS to improve it further and believe me I’m tempted to do just that. Now the background overlay fades in to 0.8 opacity and the modal dialog fades in to opacity 1 i.e. To get the dialog fading in and out it needs its own CSS transition, this time on opacity i.e.modal-content It actually looks OK to me (but then I’m not a designer so I don’t care hugely about this stuff). The final wrinkle is that now the dialog doesn’t transition in, although the gray background overlay does. Setting the opacity with background-colour just applies it to the background overlay and the dialog itself isn’t affected and is not see through at all. Then the dialog and the background have an opacity of 0.8 and I’ve got a see through modal which I definitely don’t want. modal-show is the class that we add and remove to show and hide the modal dialog. Visibility does work with transitions, hence the change If the showing and hiding is managed by changing display from none to block then the transitions don’t work. I’ve changed it to use the visibility property. The visibility in bootstrap is controlled by the CSS display property. To do this, the modal styles are overridden. To get the modal to appear and disappear is straight forward but I want it to show with a transition to fade it in and out, otherwise it looks terrible. The detail of it is really in the CSS and it’s that I had t spend time fiddling around withīackground-color: rgba(169, 169, 169, 0.8) The show and hide state is set at the parent component level and is persisted through a state hook taking a boolean i.e. Import ModalLauncher from "./ModalLauncher" It’s stripped down to basics and it’s pretty straight forward Modal ComponentĬonst Modal = ( from "react" So I recommend that you go straight there and copy the code down. Implementationįull implementation is on my git hub site ** I use third party components and shortcuts all the time. They do it themselves and take much longer about it. No true programmer would save time by using third party components or by taking shortcuts. Also, I want to use the latest bootstrap and not be forced to use the earlier one in React-Bootstrap. In any case I just want the modal working not a heap of other bootstrap components. It should be possible without it.Īlternatively I could use React-Bootstrap components. But I don’t want to install JQuery into my project just so I can have a modal dialog behaving appropriately. I could import JQuery and use a useRef hook to the DOM. I’m going to roll my own and use useState react hook to swap the classes in and out to show and hide it. There is no JQuery and I don’t want to be referencing DOM elements directly if I can avoid it. To show the modal I need to call it thus $('#myModal').modal('show') before the shown.bs.What I want – a lovely modal dialog component The Problem Returns to the caller before the modal has actually been shown or hidden (i.e. modal () // initialized with defaults $ ( '#myModal' ). addClass ( 'fat' )Īll methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior): $ ( '#myModal' ). All public APIs are single, chainable methods, and return the collection acted upon. We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. To accomplish this, use a wrapping element. For example, a button cannot both have a tooltip and toggle a modal. Only one plugin per element via data attributesĭon't use data attributes from multiple plugins on the same element. off ( '.data-api' )Īlternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this: $ ( document ). Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with data-api. That said, in some situations it may be desirable to turn this functionality off. This is Bootstrap's first-class API and should be your first consideration when using a plugin. You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. Consult our bower.json to see which versions of jQuery are supported. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). If you include plugins individually, make sure to check for these dependencies in the docs. Some plugins and CSS components depend on other plugins.
0 Comments
Leave a Reply. |