First of all let's style is-opened class which will be applied to modal root once it's opened
Let's bind a click to create a modal based on existing element.
As you can see it doesn't matter if we create a modal based on the very top element of the modal or the content itself: because of data-modal attribute we can go up the tree and apply logic to the proper element. data-modal attribute is a key here and you should always declare it when you modals are already contain modal boilerplate markup.
Also it's possible to simplify modals creation and not to provide boilerplate markup every time for every modal. Instead, you can pass only content of the future modal and it will be wrapped up before first open attempt. The decision about wrapping will be made after searching data-modal element up the tree. If such element isn't found the passed content will be treated as a content of the modal.
To customize default modal boilerplate pass your own template as defaultModalTemplate option of modalService.init method. Content will be inserted to data-modal-content node
Content element
If your content of the modal is just a string you don't have to create an element just to pass it to Modal.create(). Pass your string to the Modal.create() and it will be wrapped in the modal template and inserted to the DOM.
Usually you want to close the modal once user clicks outside of it, but sometimes it's not what users expects: for example if you show a form within the modal and the user copy/paste his email he can accidentally close the modal because the text selection process was over outside of the modal. Another case is when you render a map in popup - dragging the map can lead to the same bad UX.
You can disable that behaviour by setting autoCloseOnClickOutside flag to false (true is default) either globally via Modal.init({autoCloseOnClickOutside: false}) or on the modal instance level new Modal(element, {autoCloseOnClickOutside : false}). The latter has higher priority and always overrides global value.