0

Problem: when I open a modal popup page containing javascript and css, both reflects on the parent page, making a mess. I use angularjs and open the modal like this:

var modalInstance = $modal.open({
animation: true,
templateUrl: 'myPopup.html',
controller: 'MyController',
scope: $scope

});

and even when I close the popup the parent page continues messed up. How can I isolate the popup css and javascript in a way that they don't reflect on the parent page ? Is there a simple way to do this ?

ps. I tried to create a new scope and pass it as parameter to the modal expecting that the DOM of the parent page would not be modified, but no success.

Edit: the link of the component is this.

Digao
  • 520
  • 8
  • 22
  • 1
    if you add css and dont remove it after closing the modal you should either add parent selectors like `.mymodal ...` in your css or think about using an iframe? – Alex Feb 01 '17 at 11:42

1 Answers1

0

Can you modify the CSS so it does not contain rules that apply to elements outside of your template? If you can uniquely identify your template, by giving an ID to the container of it, you could modify the rules so they only apply to elements within that one. As for the javascript, you could do the same, though it really depends on the code itself. Can you give more information about the CSS and the scripts you're using?

Edit: Following Alex suggestion, the possible best approach would be to open an iframe within the modal. To do that, the template you render in your modal, myPopup.html, would just contain an iframe pointing to an URL and, in the page available through that URL, paste your component. As for the communication with the component, you can pass parameters in the URL and then read them as explained here or here.

If you need communication in the opposite direction, that is, if the user interaction with the modal should somehow affect the page from where the modal was opened, it gets tricky, as you would probably need to involve the server.

Community
  • 1
  • 1
David Ballester
  • 557
  • 3
  • 16
  • I'd rather a more simple solution instead of structuring all my css, if possible. Regarding the javascript, I'm using a component and this component includes its css and javascript, which mess my parent page. If I remove them, it does not work... – Digao Feb 01 '17 at 11:51
  • Is the component a third-party plugin or something? Can you provide the link to it? – David Ballester Feb 01 '17 at 12:49
  • 1
    I think the easiest way to do this is following Alex suggestion: using an iframe. If you don't want to modify the component CSS and you need complete isolation, it's the cleanest approach (even though I, personally, hate iframes). – David Ballester Feb 01 '17 at 13:00
  • but how am I suppose to open this modal inside an iframe and pass the scope parameter to it ? – Digao Feb 01 '17 at 13:02
  • The modal would contain the iframe. As for the parameters it needs, they should be in the URL to the iframe. Then, in the completely independent page that renders the content of your modal, you would read those parameters from the URL and initialize your component accordingly. – David Ballester Feb 01 '17 at 15:23