diff --git a/src/core/OpenCloseModal/OpenCloseModal.tsx b/src/core/OpenCloseModal/OpenCloseModal.tsx
index c19fa493b..c50a039ae 100644
--- a/src/core/OpenCloseModal/OpenCloseModal.tsx
+++ b/src/core/OpenCloseModal/OpenCloseModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import Button from '../Button/Button';
 import { t } from '../../utilities/translation/translation';
@@ -73,6 +73,13 @@ export function OpenCloseModal(props: Props) {
     className
   } = props;
 
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (!isOpen) {
+      document.querySelector('body')?.classList.remove('modal-open');
+    }
+  }, [isOpen]);
+
   return (
     <Modal
       isOpen={isOpen}
diff --git a/src/form/ModalPicker/ModalPicker.tsx b/src/form/ModalPicker/ModalPicker.tsx
index bb68678f5..2040d990d 100644
--- a/src/form/ModalPicker/ModalPicker.tsx
+++ b/src/form/ModalPicker/ModalPicker.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Page } from '@42.nl/spring-connect';
 import {
   Modal,
@@ -118,6 +118,13 @@ export default function ModalPicker(props: Props) {
 
   const shouldRenderPagination = !(page.first && page.last);
 
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (!isOpen) {
+      document.querySelector('body')?.classList.remove('modal-open');
+    }
+  }, [isOpen]);
+
   return (
     <Modal isOpen={isOpen} toggle={() => closeModal()}>
       <ModalHeader toggle={() => closeModal()}>{placeholder}</ModalHeader>