{"action":"created","issue":{"url":"https://api.github.com/repos/salesforce-ux/design-system/issues/335","repository_url":"https://api.github.com/repos/salesforce-ux/design-system","labels_url":"https://api.github.com/repos/salesforce-ux/design-system/issues/335/labels{/name}","comments_url":"https://api.github.com/repos/salesforce-ux/design-system/issues/335/comments","events_url":"https://api.github.com/repos/salesforce-ux/design-system/issues/335/events","html_url":"https://github.com/salesforce-ux/design-system/issues/335","id":185326669,"number":335,"title":"How to modal?","user":{"login":"Diamundo","id":8041052,"avatar_url":"https://avatars.githubusercontent.com/u/8041052?v=3","gravatar_id":"","url":"https://api.github.com/users/Diamundo","html_url":"https://github.com/Diamundo","followers_url":"https://api.github.com/users/Diamundo/followers","following_url":"https://api.github.com/users/Diamundo/following{/other_user}","gists_url":"https://api.github.com/users/Diamundo/gists{/gist_id}","starred_url":"https://api.github.com/users/Diamundo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Diamundo/subscriptions","organizations_url":"https://api.github.com/users/Diamundo/orgs","repos_url":"https://api.github.com/users/Diamundo/repos","events_url":"https://api.github.com/users/Diamundo/events{/privacy}","received_events_url":"https://api.github.com/users/Diamundo/received_events","type":"User","site_admin":false},"labels":[{"id":255254290,"url":"https://api.github.com/repos/salesforce-ux/design-system/labels/help%20wanted","name":"help wanted","color":"159818","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2016-10-26T08:22:07Z","updated_at":"2016-10-28T13:41:44Z","closed_at":"2016-10-26T18:37:30Z","body":"[See this question on the Developer Forums](https://developer.salesforce.com/forums/ForumsMain?id=9060G000000XdcPQAS), but given that reaction time is a bit quicker here than over there I decided to repost it here.\r\n\r\nI have no idea how to work with modals. I copied the code from [LDS.com/components/modals/](https://www.lightningdesignsystem.com/components/modals/) into my code, a few componentlayers into my app, but (after commenting out the _svg_ part) the modal shows up on loading the app and I can't get it to go away...\r\n\r\nGiven that I can't find any examples on how to work with it using javascript I come to you for help.\r\n\r\nP.S. I believe, reading #305, you might want to update the example code given that SVG is now included in _lightning:icon_.\r\n\r\n**Code:**\r\n```html\r\n<aura:component >\r\n    <aura:handler name=\"init\" value=\"{!this}\" action=\"{!c.doInit}\" />\r\n\r\n    <div class=\"slds-grid slds-p-vertical--small\">\r\n               \r\n        <div class=\"slds-p-horizontal--small\">\r\n            <lightning:button variant=\"brand\" label=\"Save\" onclick=\"{!c.save}\" />\r\n          <!-- No save icon, so for now we have this button. (see github issue #331 -->\r\n        </div>\r\n\r\n        <div class=\"slds-p-horizontal--small\">\r\n            <button class=\"slds-button\" onclick=\"{!c.export}\">\r\n                <lightning:icon iconName=\"action:share\" size=\"medium\" alternativeText=\"Export\" />\r\n            </button>\r\n        </div>\r\n        \r\n    </div>\r\n    \r\n<!-- Here begins the example code from LDS.com/components/modals/ -->\r\n\r\n    <div role=\"dialog\" tabindex=\"-1\" aria-labelledby=\"header43\" class=\"slds-modal slds-fade-in-open\">\r\n        <div class=\"slds-modal__container\">\r\n            <div class=\"slds-modal__header\">\r\n                <button class=\"slds-button slds-modal__close slds-button--icon-inverse\">\r\n\r\n<!-- \r\nSVG Doesn't work, missing component or something. \r\nThat's no biggie though. I don't think I'm keeping the button.\r\n\r\n                    <svg aria-hidden=\"true\" class=\"slds-button__icon slds-button__icon-!-large\">\r\n                        <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#close\"></use>\r\n                    </svg>\r\n-->\r\n                    <span class=\"slds-assistive-text\">Close</span>\r\n                </button>\r\n                <h2 id=\"header43\" class=\"slds-text-heading--medium\">Modal Header</h2>\r\n            </div>\r\n            <div class=\"slds-modal__content slds-p-around--medium\">\r\n                <div>\r\n\t\t\t\t\tHERE COMES SOME DYNAMICALLY CREATED TEXT                    \r\n                </div>\r\n            </div>\r\n            <div class=\"slds-modal__footer\">\r\n                <button class=\"slds-button slds-button--neutral\">Cancel</button>\r\n                <button class=\"slds-button slds-button--brand\">Save</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"slds-backdrop slds-backdrop--open\"></div>\r\n    \r\n</aura:component>\r\n```"},"comment":{"url":"https://api.github.com/repos/salesforce-ux/design-system/issues/comments/256922916","html_url":"https://github.com/salesforce-ux/design-system/issues/335#issuecomment-256922916","issue_url":"https://api.github.com/repos/salesforce-ux/design-system/issues/335","id":256922916,"user":{"login":"Diamundo","id":8041052,"avatar_url":"https://avatars.githubusercontent.com/u/8041052?v=3","gravatar_id":"","url":"https://api.github.com/users/Diamundo","html_url":"https://github.com/Diamundo","followers_url":"https://api.github.com/users/Diamundo/followers","following_url":"https://api.github.com/users/Diamundo/following{/other_user}","gists_url":"https://api.github.com/users/Diamundo/gists{/gist_id}","starred_url":"https://api.github.com/users/Diamundo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Diamundo/subscriptions","organizations_url":"https://api.github.com/users/Diamundo/orgs","repos_url":"https://api.github.com/users/Diamundo/repos","events_url":"https://api.github.com/users/Diamundo/events{/privacy}","received_events_url":"https://api.github.com/users/Diamundo/received_events","type":"User","site_admin":false},"created_at":"2016-10-28T13:41:44Z","updated_at":"2016-10-28T13:41:44Z","body":"Ah yes, I forgot to alter that after exporting from my code. I have changed it in the above comment."}}
{"actor":{"display_login":"Diamundo"}}