Allow using the modal exclusively within an element other than the HTML body

[flekschas]

Currently, svelte-simple-modal assume that it's used globally. I.e., it overlays the body element. However, sometimes it can be useful to just use it within another (scrollable) container.

To support this we could traverse the DOM tree and find the first parent that is scrollable using for instance:

const isScrollable = (element) =>
  element.scrollHeight > element.clientHeight && window.getComputedStyle(element).overflowY.indexOf('hidden') === -1;

const getScrollableParent = (element) =>
  !element || element === document.body
    ? document.body
    : (isScrollable(element) ? element : getScrollableParent(element.parentNode));

[josdejong]

Is there a way to open a nested modal? Right now, when I open a second, nested modal from an modal, the parent modal disappears. Ideally, the second modal should be rendered on top of the original one, showing both.

[flekschas]

@josdejong there is not. This ticket is also more aimed at a way to bin the modal to a DOM element other than body rather then true nested in the sense that one modal is superimposing another modal.

[josdejong]

Ok I've created a separate issue: #89. Would be very useful, at least to me :)