Linked Questions

Popular Questions

How can I make bootstrap modal background get a blur effect

Asked by At

I would like to figure it out what's the best way to make the background of an open modal form to be with a blur effect.

I've tried with the following CSS code:

`body.modal-open >:not(.modal) {
    -webkit-filter: blur(5px) grayscale(90%);
    filter: blur(5px) grayscale(90%);
}`

But it ends up applying it to the whole modal including the content and I ran out of ideas on how to achieve that effect.

This is the code that triggers the modal where I've been trying to apply the CSS styles.

`

<button
    type="button"
    id="modal"
    className="btn btn-primary"
    data-toggle="modal"
    data-target="#exampleModalCenter">
      Agendar una Cita
  </button>
  <div
      className="modal fade"
      id="exampleModalCenter"
      tabIndex="-1"
      role="dialog"
      aria-labelledby="exampleModalCenterTitle"
      aria-hidden="true">
`

The project was set up originally using create-react-app and the Bootstrap framework.

This is the actual look of the modal when is open, however, I would like it to have a blurred background.

Modal:

enter image description here

Related Questions