I’ve been meaning to move the hosting for codebuckets for months now. My level of enthusiasm for moving hosting come somewhere between going to the dentist and getting my annual taxes sorted. Actually, it’s less appealing than both those unappealing options. I just don’t want to do it.
But I have bitten the bullet, grabbed the greasy pig, put on my big boy panties and moved my hosting to Hostinger over the weekend. While they were a few wrinkles (my stylesheets completely disappeared at one point leaving codebuckets looking like it was a website from the 90s) it all happened pretty smoothly – largely due to the excellent support over at Hostinger. So, it’s a big shout out to the support guy, Ignas from Lithuania, for spending a good chunk of time helping me out and getting me the new configuration just as I wanted. Thank you.
The good thing is that now it’s over with some other sites I run, I can legitimately claim the hosting costs back against my business expenses – marvellous. And what’s more, I’ve hooked up an SSL certificate, which came free when I bought the hosting, so now codebuckets is finally https as it should have been all along.
So, job done. All, I need to do now is sort out my 2020/21 taxes. Sadly, I can feel my euthusiasm draining away again!
I want the modal dialog component working in a React project. My React project uses function components and hooks but it would be the same with class components.
To show the modal I need to call it thus
It’s not going to work as is in React. There is no JQuery and I don’t want to be referencing DOM elements directly if I can avoid it.
I’m going to roll my own and use useState react hook to swap the classes in and out to show and hide it.
I could import JQuery and use a useRef hook to the DOM. But I don’t want to install JQuery into my project just so I can have a modal dialog behaving appropriately. It should be possible without it.
Alternatively I could use React-Bootstrap components. But it feels a bit abstracted to me. In any case I just want the modal working not a heap of other bootstrap components. Also, I want to use the latest bootstrap and not be forced to use the earlier one in React-Bootstrap.
So I’m going to roll my own. No true programmer would save time by using third party components or by taking shortcuts. They do it themselves and take much longer about it. I shall do it this way **
** I use third party components and shortcuts all the time. I’m just not going to for this one.
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. That’s a bit more awkward.
To do this, the modal styles are overridden. The visibility in bootstrap is controlled by the CSS display property. I’ve changed it to use the visibility property. If the showing and hiding is managed by changing display from none to block then the transitions don’t work. Visibility does work with transitions, hence the change
.modal-show is the class that we add and remove to show and hide the modal dialog. We use opacity to bring in the dialog. Interestingly if I use
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.
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.
The final wrinkle is that now the dialog doesn’t transition in, although the gray background overlay does. It actually looks OK to me (but then I’m not a designer so I don’t care hugely about this stuff). To get the dialog fading in and out it needs its own CSS transition, this time on opacity i.e.
Now the background overlay fades in to 0.8 opacity and the modal dialog fades in to opacity 1 i.e. fully visible.
I could spend more time playing around with the CSS to improve it further and believe me I’m tempted to do just that. 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). So, I am declaring it job done!
This Stack overflow question gives a whole bunch of implementations for this but they do use JQuery which I wanted to avoid. It might well be the definition of madness to implement something that has already got a bunch of alternative implementations. I just wanted to do it without JQuery.
Bootstrap modal dialog documentation. The JQuery does more than open and close the dialog but that’s all I need it to do right now
React-Bootstrap components. I’ve tried these but I just don’t like them. I’ve watched pluralsight videos where people are very keen on them so it’s probably just me.