Setting overlayClose via modalFactory does not work because of casing

[PoyangLiu]

When creating a dialog using modalFactory modalFactory({ overlayClose: "false" })

and the "prop=overlayClose" property is added to the attribute element.attr(prop, config[prop]);

the attribute becomes lowercase "overlayclose" in the attrs object of the modal directive. attrs.overlayclose === "false"

This results in the scope.overlayClose to always be true scope.overlayClose = attrs.overlayClose === 'false' ? false : true;

I resolve this by scope.overlayClose = (attrs.overlayClose || attrs.overlayclose) === 'false' ? false : true;

I assume the same will apply to other capitalized properties such as "animationIn" and "animationOut"

[PoyangLiu]

I should mention that this was discovered in Chrome v43. I did not test it on other browser.

[laurent-le-graverend]

Facing same issue, with the current code, there is no way to set overlay-close attribute to false.

 if(config[prop]) {
   switch (prop) {
     [...]
     case 'overlayClose':
       element.attr('overlay-close', config[prop] ? 'true' : 'false'); // must be string, see postLink() above

Maybe the line should be simply replaced by element.attr('overlay-close', config[prop]);

https://github.com/zurb/foundation-apps/blob/master/js/angular/components/modal/modal.js#L279

[chr22]

This is still an issue. Any timeframe for when this will be fixed?

[laurent-le-graverend]

This was merged and fixed @chr22 Any example of code where it does not work for you?

[chr22]

var modal = new this.ModalFactory({
                overlay: true,
                overlayClose: false,
                templateUrl: "Web/Areas/FarmTaskList/FarmTaskAddDialog.html",
                contentScope: {
                    close: () => {
                        modal.destroy();
                    },
                    farmTask: farmTask,
                    farmTasks: this.Tasks
                }
            });

            modal.activate();

The problem is that the the overlayClose attribute won't be added because of the "if" in the picture below when the value is false.

And this line only checks if the value is "false", but it will never be false because it will never be added when it is false.

[laurent-le-graverend]

Set it as a string 'false'?

[chr22]

Thanks it works.

The documentation should be updated to reflect that. The current documentation uses a boolean value.

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