Added option to render lightbox on the root node

[ac3d912]

When trying to added ModalImage in certain div's it can cause the lightbox to be constrained to the parent styles. This just allows you to add/remove the lightbox on the root node. I suppose it could be a configurable node instead of just the root, but this worked great for me.

[aautio]

@ac3d912 thank you for this! I'll review the changes during the weekend and merge them 👍

[aautio]

in certain div's it can cause the lightbox to be constrained to the parent styles

@ac3d912 would you provide an example of a situation where this happens?

I've reviewed the pull request. Portals are not available in React 15. I'd like to keep backward compatibility with React 15 and thus I'd be interested to understand the problem a bit more.

[ac3d912]

I was using it with slick-carousel (https://github.com/kenwheeler/slick/) and bootstrap. When the lightbox popped up it was being constrained to the slick-carousel area.

The portals in 16 work great, but I understand wanting to keep backwards compatibility. Not sure how else to get out of any parent styles...rendering on root was just the easiest solution.

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Slider from 'react-slick';
import ModalImage from 'react-modal-image'

...
    this.createdImages = Object.keys(this.props.images).map((image, index) => {
      // eslint-disable-line arrow-body-style
      /* istanbul ignore next */
      return (
        <div key={image}>
          <ModalImage
            small={this.props.images[image][0]}
            large={this.props.images[image][1]}
            alt=''
            className='slider-image'
            renderRoot={true}
            hideDownload={true}
          />
        </div>
      );
    });
...
  _get_slick_carousel() {
    var settings = {
      centerMode: true,
      //centerWidth: '10px',
      //variableWidth: true,
      dots: false,
      infinite: true,
      speed: 500,
      slidesToScroll: 1,
      slidesToShow: 2,
      initialSlide: 0,
      draggable: false,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            centerMode: true,
            slidesToShow: 1,
          },
        },
        {
          breakpoint: 980,
          settings: {
            centerMode: false,
            slidesToShow: 1,
          },
        },
      ],
    };

    return (
      <div className="home-image-gallery">
        <Slider {...settings}>{this.createdImages}</Slider>
      </div>
    );
  }
...

.slider-image {
  padding-left: 0px;
  padding-right: 0px;
  margin: auto;
}

Here's a screenshot of the result without rendering it on root: