diff --git a/src/css/core/_modal.styl b/src/css/core/_modal.styl new file mode 100644 index 000000000..2fba5bfb1 --- /dev/null +++ b/src/css/core/_modal.styl @@ -0,0 +1,2 @@ +body.-modal + overflow: hidden diff --git a/src/css/core/index.styl b/src/css/core/index.styl index 4e7369ff0..1b6a4183c 100644 --- a/src/css/core/index.styl +++ b/src/css/core/index.styl @@ -4,6 +4,7 @@ @require '_normalize' @require '_print' +@require '_modal' @require '_icons' @require 'code' @require 'images' diff --git a/src/factories/PopupManager.js b/src/factories/PopupManager.js index 0c8c49c00..45a120028 100644 --- a/src/factories/PopupManager.js +++ b/src/factories/PopupManager.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import { isKey } from '@inkline/inkline/src/helpers/index'; +import { addClass, isKey, removeClass } from '@inkline/inkline/src/helpers/index'; export class PopupManager { instances = {}; @@ -48,12 +48,16 @@ export class PopupManager { } else { this.modalStack.push({ id: id }); } + + addClass(window.document.body, '-modal'); } closeModal(id) { const modalIndex = this.modalStack.findIndex((m) => m.id === id); this.modalStack.splice(modalIndex, 1); + + removeClass(window.document.body, '-modal'); } getTopPopup() { diff --git a/tests/unit/factories/PopupManager.spec.js b/tests/unit/factories/PopupManager.spec.js index 0d2113e8f..996d5f10d 100644 --- a/tests/unit/factories/PopupManager.spec.js +++ b/tests/unit/factories/PopupManager.spec.js @@ -158,6 +158,12 @@ describe('Factories', () => { expect(popupManager.modalStack.length).toEqual(1); expect(popupManager.modalStack[0].$el.style.zIndex).toEqual(1000); }); + + it('should add ".-modal" modifier class to document body', () => { + popupManager.openModal('abc'); + + expect(window.document.body.classList.contains('-modal')).toEqual(true); + }); }); describe('closeModal()', () => { @@ -167,6 +173,13 @@ describe('Factories', () => { expect(popupManager.modalStack.length).toEqual(0); }); + + it('should remove ".-modal" modifier class from document body', () => { + popupManager.openModal('abc'); + popupManager.closeModal('abc'); + + expect(window.document.body.classList.contains('-modal')).toEqual(false); + }); }); describe('getTopPopup()', () => {