{"action":"created","issue":{"url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/51","labels_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/51/labels{/name}","comments_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/51/comments","events_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/51/events","html_url":"https://github.com/yapplabs/ember-modal-dialog/pull/51","id":92085963,"number":51,"title":"Nested Overlay","user":{"login":"sandstrom","id":122287,"avatar_url":"https://avatars.githubusercontent.com/u/122287?v=3","gravatar_id":"","url":"https://api.github.com/users/sandstrom","html_url":"https://github.com/sandstrom","followers_url":"https://api.github.com/users/sandstrom/followers","following_url":"https://api.github.com/users/sandstrom/following{/other_user}","gists_url":"https://api.github.com/users/sandstrom/gists{/gist_id}","starred_url":"https://api.github.com/users/sandstrom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sandstrom/subscriptions","organizations_url":"https://api.github.com/users/sandstrom/orgs","repos_url":"https://api.github.com/users/sandstrom/repos","events_url":"https://api.github.com/users/sandstrom/events{/privacy}","received_events_url":"https://api.github.com/users/sandstrom/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":28,"created_at":"2015-06-30T12:58:39Z","updated_at":"2015-08-18T21:00:00Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/pulls/51","html_url":"https://github.com/yapplabs/ember-modal-dialog/pull/51","diff_url":"https://github.com/yapplabs/ember-modal-dialog/pull/51.diff","patch_url":"https://github.com/yapplabs/ember-modal-dialog/pull/51.patch"},"body":"Basically does two things:\r\n\r\n1. Nests the modal within the overlay and\r\n2. adds a wrapping div outside the modal.\r\n\r\nThis allows for the scrolling behaviour outlined in https://github.com/yapplabs/ember-modal-dialog/issues/11. It also enables Holy Grail™ centering of the modal, using the CSS quoted below.\r\n\r\nEverything is disabled by default (to avoid breaking existing usage). It's activated via a `nestedOverlay`. Unfortunately this makes the template pretty verbose, if this could be considered breaking it would be easier.\r\n\r\nCloses #11\r\n\r\nPlease let me know what you think! @lukemelia @samselikoff \r\n\r\n***\r\n\r\n```css\r\n.ember-modal-wrapper {\r\n  position: fixed;\r\n  z-index: 99;\r\n  height: 100vh;\r\n  left: 0;\r\n  right: 0;\r\n  top: 0;\r\n  overflow-y:scroll;\r\n}\r\n\r\n.ember-modal-overlay {\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content: center;\r\n  min-height:100vh;\r\n  padding:1em;\r\n}\r\n\r\n.ember-modal-overlay.translucent {\r\n  background-color: hsla(0, 0%, 50%, 0.25);\r\n}\r\n\r\n/* basic modal style (an example, this is not necessary for the centering) */\r\n.ember-modal-dialog {\r\n  background-color:white;\r\n  min-width:30em;\r\n  max-width:80vw;\r\n  min-height:20em;\r\n  padding:1em;\r\n  box-sizing: border-box;\r\n  box-shadow:0px 4px 25px 4px rgba(0,0,0,0.30);\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/comments/132348937","html_url":"https://github.com/yapplabs/ember-modal-dialog/pull/51#issuecomment-132348937","issue_url":"https://api.github.com/repos/yapplabs/ember-modal-dialog/issues/51","id":132348937,"user":{"login":"samselikoff","id":2922250,"avatar_url":"https://avatars.githubusercontent.com/u/2922250?v=3","gravatar_id":"","url":"https://api.github.com/users/samselikoff","html_url":"https://github.com/samselikoff","followers_url":"https://api.github.com/users/samselikoff/followers","following_url":"https://api.github.com/users/samselikoff/following{/other_user}","gists_url":"https://api.github.com/users/samselikoff/gists{/gist_id}","starred_url":"https://api.github.com/users/samselikoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samselikoff/subscriptions","organizations_url":"https://api.github.com/users/samselikoff/orgs","repos_url":"https://api.github.com/users/samselikoff/repos","events_url":"https://api.github.com/users/samselikoff/events{/privacy}","received_events_url":"https://api.github.com/users/samselikoff/received_events","type":"User","site_admin":false},"created_at":"2015-08-18T20:59:59Z","updated_at":"2015-08-18T20:59:59Z","body":"@chrislopresto that would be perfect. Then I could also change `positioning` to fixed or something else, to get the ember-tether goodness?"}}