diff options
Diffstat (limited to 'client/modalImage')
| -rw-r--r-- | client/modalImage/modal.css | 8 | ||||
| -rw-r--r-- | client/modalImage/modalImage.container.js | 6 |
2 files changed, 9 insertions, 5 deletions
diff --git a/client/modalImage/modal.css b/client/modalImage/modal.css index cf8f331d..d628cc48 100644 --- a/client/modalImage/modal.css +++ b/client/modalImage/modal.css @@ -14,7 +14,7 @@ .modal.visible { opacity: 1; pointer-events: auto; - z-index: 999999999; + z-index: 9999999; } .modal .inner { position: absolute; @@ -68,6 +68,7 @@ align-items: center; cursor: pointer; transition: all 0.1s cubic-bezier(0,0,0,1); + z-index: 99999999; } .modal .prev { left: 0; @@ -113,5 +114,8 @@ } @media all and (max-device-width: 1024px) { - + .modal img { + max-width: 100vw; + max-height: 90vh; + } }
\ No newline at end of file diff --git a/client/modalImage/modalImage.container.js b/client/modalImage/modalImage.container.js index b05cd0a3..77f9a9df 100644 --- a/client/modalImage/modalImage.container.js +++ b/client/modalImage/modalImage.container.js @@ -77,10 +77,10 @@ class ModalImage extends Component { } return ( <div className={visible ? 'modal visible' : 'modal'}> - <div className='inner'> - <div className='centered'> + <div className='inner' onClick={() => this.close()}> + <div className='centered' onClick={e => e.stopPropagation()}> <img src={img.src} /> - {caption && <div class='caption'>{caption}</div>} + {caption && <div className='caption'>{caption}</div>} </div> </div> <div onClick={() => this.prev()} className='prev' aria-label='Previous image' alt='Previous image'><img src='/assets/img/arrow-left.png' /></div> |