Modal Does't remove from DOM after if click on overlay .

[sumit-cis]

Right now, if I open the modal once, then click on its overlay, and open it again. then I have twice the element in the DOM. I want to completely removed old model from DOM please help me to resolve that issue.

Here a code example :-

URL : http://foundation.zurb.com/apps/docs/#!/modal

Programmatic Modals
var modal = new ModalFactory({
// Add CSS classes to the modal
// Can be a single string or an array of classes
class: 'tiny dialog',
// Set if the modal has a background overlay
overlay: true,
// Set if the modal can be closed by clicking on the overlay
overlayClose: false,
// Define a template to use for the modal
templateUrl: 'partials/examples-dynamic-modal.html',
// Allows you to pass in properties to the scope of the modal
contentScope: {
close: function() {
modal.deactivate();
$timeout(function() {
modal.destroy();
}, 1000);
}
}
});

modal.activate();

Some screen shots

First time loaded

after click on overlay , its only hidden not destroyed form DOM 2nd time open modal

[jarrydfillmore]

Strange..

[sstativa]

I've also noticed this issue. In addition to this, overlay and overlayClose don't work for me as expected. No matter what value I set, the behaviour is like overlay: true, overlayClose: true.

Updated: Apparently, this is documentation error because the source code has a comment that states the value should be a string

[sumit-cis]

Yeah, value js overlay adn js overlay value should be string , but I dont wanna false js overlayClose disable.

[sstativa]

I suppose the issue is not a bug, but it was originally designed like that, however, I cannot prove it. I personally prefer when the modal is added into DOM then removed from DOM after close.

If you look at foundation.modal section you will find a kind of interesting example. It looks like the purpose of the factory is to create the modal when controller is initialised, then access the modal as a regular object.

That's just my thoughts.

[sumit-cis]

I have already created Service for open & close model. yeah already gone through the documents, but its not work, means Model element not removed from DOM After close it

[soumak77]

The modal overlay close triggers the deactivate method to be called on the modal which simply hide the modal. You'll need to call destroy to have the modal removed from the DOM. If you give your modal a hard-coded ID, you can then subscribe to messages for the modal. When you get the close message, call modal.destroy() like in the examples.

By the way, this repo has been dead for awhile and is now being maintained in https://github.com/base-apps/angular-base-apps. If you want, you can create a PR to introduce the concept of overlayDestroy. Similar to overlayClose, it would cause the modal to close when clicking on the overlay, however, once the animation is completed, the modal would be destroyed.

[sumit-cis]

Thanks for providing the requested information :)

[soumak77]

@cisdev739 I added a destroy-on-close attribute for modals with https://github.com/base-apps/angular-base-apps/issues/16. It will be part of the 1.3 release.