Bootstrap Modal Dialog in React without JQuery

The Task

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.

What I want – a lovely modal dialog component

The Problem

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.

The Solution

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.


Full implementation is on my git hub site

so I recommend that you go straight there and copy the code down. It’s stripped down to basics and it’s pretty straight forward

Modal Component

import React from 'react';

const Modal = ({ children, show, hideModal }) => (
    className={`modal ${show ? ' modal-show' : ''}`}
    <div className="modal-dialog" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title">Modal Title</h5>
            <span aria-hidden="true">&times;</span>
        <div className="modal-body">
        <div className="modal-footer">
          <button type="button" className="btn btn-primary" onClick={hideModal}>
            className="btn btn-secondary"

export default Modal;

It’s a straight copy from the bootstrap documentation with a prop to toggle the visibility and a function to response to close and save.


import React, { useState } from "react";
import Modal from "./Modal";
import ModalLauncher from "./ModalLauncher";
import '../css/modal.css';

function App() {
  const [show, setShow] = useState(false);

  const showModal = () => {

  const hideModal = () => {

  return (
      <div className="container-fluid">
      <div className="d-flex justify-content-center align-content-center m-5">
            <div className="p-5 demo-text">front page text</div>
            <ModalLauncher showModal={showModal} />
            <div className="p-5 demo-text">More front page text</div>
        <Modal show={show} hideModal={hideModal}>Modal content</Modal>

export default App;

The show and hide state is set at the parent component level and is persisted through a state hook taking a boolean i.e.

const [show, setShow] = useState(false);

The detail of it is really in the CSS and it’s that I had t spend time fiddling around with

    display: block;
    visibility: hidden;

    background-color: rgba(169, 169, 169, 0.8);
    transition: opacity 0.2s linear; 

    opacity: 0; 

.modal-show .modal-content 
    opacity: 1; 
    transition: 0.2s linear; 

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

    background-color: rgba(169, 169, 169);
    opacity: 0.5;
    transition: opacity 0.2s linear; 

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.

See through modal dialog. Nasty

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.

    opacity: 0; 

.modal-show .modal-content 
    opacity: 1; 
    transition: 0.2s linear; 

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!

Useful Links

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.

In Praise of the Marquee Tag

I’ve created a few internal tools for various tasks over the years. I tend to pop a web front end on them. I also like to pop on a marquee tag somewhere nice and visible so I can marvel at its scrolling majesty. I do it just to amuse myself then I sit back and wait for someone to notice then shout at me to not be so ridiculous and take off the ludicrous, retro, badly supported tag.

Oddly that doesn’t happen. I’ve checked back on the tools after several years of use and the text is still there, loyally scrolling away. I think the tag has a surprising number of supporters and actually there is a deep human need for easy to implement scrolling text. I imagine that other people in the company enjoy gazing hypnotically at the jerky scroll, just as I do.

I reckon I’m going for the blink tag next. An even more popular choice.

70-480 Programming in HTML5 with JavaScript and CSS3 – Study Notes

I recently took MS exam 70-480 (and passed and was surprisingly delighted). So before the good feelings dissolve away I thought I would publish a few notes and useful links. I’m not going to be comprehensive but I’m just going to highlight areas that came up for me that I needed deeper reading on.


The exam does feel old hat especially the JavaScript section. It is frustrating to have to remember Microsoft specific syntax (AddEventHandler!!!). But I’ve seen worse and there is stuff that is still interesting and relevant in there. The good thing is that there are techniques and syntax that crops up over and over and can really help you winnow the answers down on the exam.

Basic stuff to know

The book

I’m old school and still prefer to start with the written word on bits of paper. The standard book is this …

People are really negative about exam ref books generally and this one gets the obligatory poor reviews (and some goods ones in fairness). But do you know what – it’s fine. It’s not that readable, it’s got a lot of gaps and some of it is out of date now (and maybe was never correct in the first place). But it highlights all the syllabus areas for you then it is up to you to go on and read more. I think people get upset because the book alone isn’t enough to pass the exam. So long as you appreciate that then it’s fine.


The key thing is to go through it all with a fine tooth comb (or hair care implement of choice). So biting our lips and going through each section ….

Section 1: Implement and Manipulate Document Structures and Objects


Important bits here is understanding the JavaScript this keyword (notoriously confusion) and a tight tight grasp of JavaScript scope. Other things are


  • Semantic elements. If I’m honest, some of the questions have a ‘guess what I’m thinking’ quality to them. Get to grips with the Microsoft party line on when these should be used. Just suck it up.
  • Geolocation API
  • App Cache
  • Canvas appears a lot but there is a lot of stuff out there for instance here and here among lots of other places.
  • SVG. It’s good to know when to use SVG and when to use the canvas elements. For instance SVG scales inherently.

Section 2: Implement Program Flow

JavaScript Arrays

Good grasp of javascript control structures is vital so
array iteration (more detail here) also associative arrays and understand why they iterate differently.

Web sockets

Very high level only. How to call and pass events backwards I forwards. I read this and as interesting as it was it is way too much. Spend less time than I did on this.


Conversely Ajax comes up a lot in detail

Web Workers

Web workers also comes up. Specific points I found were

Section 3: Access and Secure data

Reg Ex

Regular Expressions crops up here and and how to call from JavaScript Which methods belong to the regex pattern and which methods belong to the string class are useful to know here.

JQuery Forms

JQuery forms API. Pay attention to differences between serialise and serialiseArray methods and be secure in your knowledge of how to submit forms through JQuery.

JavaScript Encoding

JavaScript encoding and decoding of Uris and query string . Comes up bizzarely often so one to really know. Know which method gives which output and which one to use to ensure that the query string is encoded.

Html5 input types

Html 5 input types. Really useful to memorise them all and know all the possible attributes i.e.

  • step
  • min
  • max
  • title
  • pattern etc…

particular know the attributes that can be used to limit the data input format e.g. type=”number”.

Section 4: Use CSS3 in Applications

I wanted to do this exam primarily to improve my CSS which is my weakest web dev side so I spent a bit of time of this. I’m sure you will need less.


The cascade


Layout comes up a lot so


Fancy stuff

Generally with the animation /transitions side of things I found it most useful to look at worked examples of some standard (though clever to me) forms of animations. Card flips and loading spinners are typical stuff.

Never saw

I never saw anything on the drag and drop api.  It had a decent sized section in the Microsoft exam ref book but I didn’t see this on the exam or the revision questions. Don’t blame me if you get 7 questions about it though.

Good luck

And of course best of luck for the exam. As painful as it can be, it does feel good to pass a Microsoft exam. Take it from someone who has passed onto the other side.

Better Numeric Range Input with ASP.NET MVC, HTML5 and JQuery

The Sin

I recently wrote this horrible code to generate a drop down box to select any number from 1 to 12.

Html.DropDownList("ddlClockHours", new List<SelectListItem>
 new SelectListItem {Text = 1.ToString(), Value = 1.ToString()},
 new SelectListItem {Text = 2.ToString(), Value = 2.ToString()},
 new SelectListItem {Text = 3.ToString(), Value = 3.ToString()},
 new SelectListItem {Text = 4.ToString(), Value = 4.ToString()},
 new SelectListItem {Text = 5.ToString(), Value = 5.ToString()},
 @* And so on till 12 – I’m too embarrassed to continue *@

Ouch! It was only a test harness but after an hour I still got sick of looking at it. It’s a sin that needs to be atoned for.

The Penance

For my penance I’ve said 5 Hail Marys and identified three better ways to generate numeric range dropdowns.

Using Enumerable.Range

If I want to stick with MVC and C# then there is a static method on Enumerable that will generate sequences of numbers i.e.

 Enumerable.Range(1, 12)

Will output 1 through to 12 as a list of ints. Leveraging this, my grotesque piece of Razor becomes

@Html.DropDownList("ddlClockHours", Enumerable.Range(1, 12)
.Select(x => new SelectListItem { Text = x.ToString(), 
Value = x.ToString() }));

Which renders out as a normal dropdown as before


Much better.

Using HTML5

Of course we don’t even need to get into C#. If we’ve got the luxury of a modern browser we can just use HTML5 to give us a slider control.

<input id="clockHours" type="range" min="1" max="12"/>

Which renders as


Better again.

Using JQuery

If you don’t have the luxury of a modern browser then you can fall back to JQuery UI which has a larger range of supported browsers. The code isn’t that much more but of course you need to reference JQuery and JQuery UI libraries. It’s another slider type control and the implementation is

 $(function() {
     min: 1,
     max: 12

<h2>JQuery Numeric Range</h2>
<div id="clockHoursJQuery"></div>

Which looks like

JQuery UI

So much nicer.

The Atonement

To atone for my sin I swapped out the horrible code for the Enumerable.Range implementation. I think that’s my preference really. I don’t really want to include a whole bunch of scripts and css to get a decent control (JQuery) and I don’t want to limit myself to the latest and greatest browsers (HTML5). Beside I think Enumerable.Range is little known but pretty smart and let’s face it – who doesn’t want to be little known but pretty smart.

Useful links
Nice article on Enumerable.Range
More on the HTML slider control
Official documentation for the JQueryUI slider control
As always there are code sample of all implementations on my git hub site.