{"action":"created","issue":{"url":"https://api.github.com/repos/thednp/bootstrap.native/issues/30","labels_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/30/labels{/name}","comments_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/30/comments","events_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/30/events","html_url":"https://github.com/thednp/bootstrap.native/issues/30","id":115671428,"number":30,"title":"Overlay disappears when starting a modal from another modal","user":{"login":"HelloGravity","id":2351344,"avatar_url":"https://avatars.githubusercontent.com/u/2351344?v=3","gravatar_id":"","url":"https://api.github.com/users/HelloGravity","html_url":"https://github.com/HelloGravity","followers_url":"https://api.github.com/users/HelloGravity/followers","following_url":"https://api.github.com/users/HelloGravity/following{/other_user}","gists_url":"https://api.github.com/users/HelloGravity/gists{/gist_id}","starred_url":"https://api.github.com/users/HelloGravity/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/HelloGravity/subscriptions","organizations_url":"https://api.github.com/users/HelloGravity/orgs","repos_url":"https://api.github.com/users/HelloGravity/repos","events_url":"https://api.github.com/users/HelloGravity/events{/privacy}","received_events_url":"https://api.github.com/users/HelloGravity/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":12,"created_at":"2015-11-07T15:03:53Z","updated_at":"2015-11-09T20:48:15Z","closed_at":"2015-11-09T20:48:15Z","body":"Here is a jsfiddle that demonstrates the bug: http://jsfiddle.net/dmt0z2rx/\r\nWith jQuery and bootstrap's original javascript it works: http://jsfiddle.net/qkc6bLha/\r\nThe bug happens because when the first modal closes, it removes the overlay after a short delay, and the second modal uses that same overlay element, which gets removed.\r\nI fixed the bug in my fork by using a separate overlay element for each modal: https://github.com/HelloGravity/bootstrap.native/commit/f84a093b967e26937efa56f962834abbd3eb1ded\r\n"},"comment":{"url":"https://api.github.com/repos/thednp/bootstrap.native/issues/comments/155188444","html_url":"https://github.com/thednp/bootstrap.native/issues/30#issuecomment-155188444","issue_url":"https://api.github.com/repos/thednp/bootstrap.native/issues/30","id":155188444,"user":{"login":"thednp","id":6761246,"avatar_url":"https://avatars.githubusercontent.com/u/6761246?v=3","gravatar_id":"","url":"https://api.github.com/users/thednp","html_url":"https://github.com/thednp","followers_url":"https://api.github.com/users/thednp/followers","following_url":"https://api.github.com/users/thednp/following{/other_user}","gists_url":"https://api.github.com/users/thednp/gists{/gist_id}","starred_url":"https://api.github.com/users/thednp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thednp/subscriptions","organizations_url":"https://api.github.com/users/thednp/orgs","repos_url":"https://api.github.com/users/thednp/repos","events_url":"https://api.github.com/users/thednp/events{/privacy}","received_events_url":"https://api.github.com/users/thednp/received_events","type":"User","site_admin":false},"created_at":"2015-11-09T20:48:15Z","updated_at":"2015-11-09T20:48:15Z","body":"@osdlge you can create a custom handler to your modals' trigger buttons and content in a way that you don't have to create nested modals. Here's how I would write it:\r\n```javascript\r\n// cache the current title and content of the parent modal in an object\r\nvar parentModal = {};\r\nparentModal.title = myModalTitle.innerHTML;\r\nparentModal.body = myModalBody.innerHTML;\r\nparentModal.footer = myModalFooter.innerHTML;\r\n\r\n// this is a button inside the parent Modal, when clicked will replace the content of the Modal\r\nbuttonToChildModal.addEventListener('click', function(){\r\n  // add your CHILD Modal title, content and footer to the Modal\r\n  // while this new content should have a button to \"link back\", it's handler is just below\r\n}, false);\r\n\r\n// this is a button inside the same Modal but with the child's content, when clicked will replace the content of the Modal with the cached values\r\nbuttonToParentModal.addEventListener('click', function(){\r\n  // add your PARENT Modal title, content and footer back to the original Modal\r\n}, false);\r\n```\r\n<small>Note that this code is not tested, will not work on the fly, it's just to give you an idea.</small>\r\n\r\n@HelloGravity in most cases (I mean for the most people and their most projects) there is no need for the exact same behavior, as explained in the demo, for each particular script example, you get a similar basic behavior. For instance dropdown: you click it and it opens the dropdown, or modal you click a button and opens a pop-up modal and dismiss on any target with reference to that specific modal. \r\n\r\nAs I understand, there are some issues with Modal, I am committed to fix them all, no problem, but I'm not sure about this nesting of components, I always avoid it to keep the code simple, maintainable and usable. For most particular cases, the best thing to do is NOT to change the source of the script if possible, but find a solution that's best local use, as shown above."}}