Add backdrop wrapper to modal

[D3CK3R]

Fullscreen modals are not looking good on tablets.
If i reformat the modal styles to have a dynamic height and only 30% width of screen width i currently cannot add a backdrop to it. I also cannot easily change the modal template. An actionview already has a backdrop, so it would be nice if you could port the backdrop wrapper of the ActionSheet to modals.

Thanks in advance for any reply!
Have a nice day ...

[adamdbradley]

Right now we don't have a modal directive, but probably doing the same as actionsheet is probably a good idea.

[D3CK3R]

Here is a mockup of how we use it.

[D3CK3R]

Could you give us an idea how you would implement this behavior? We can eventually do some work here. Where would you change this in ionic?
Is it the best way to change service/ionicModal.js and the template a bit?

[mlynch]

Hey @D3CK3R, I just submitted a work-in-progress PR for popup support, which will have some of the same concepts (though this is for alert dialogs, not modals like this issue): #735

Basically, we just need to have an option to size a modal to a given width and height and center it instead of being fullscreen.

[adamdbradley]

I see the modal working the same as how the actionsheet does. The actionsheet service gets called, and in the service it uses the actionsheet directive. For modal there is no directive, and as you pointed out there is no wrapper that gets added. We'll be working on this soon so that a wrapper is added, and then have the functionality to see a max size so it looks better on larger screens.

[adamdbradley]

So step 1 was to add a backdrop wrapper. Next as we'll start looking into adding a max size so it looks better on tablets/desktop. I'll create a new issue for that.

[D3CK3R]

Thanks!! Great to see some progress here.
There are still some problems here. We've added the following styles:
.modal-backdrop {
height: 100%;
background-color: rgba(0,0,0,.6);
position: relative;
z-index: 10;
}

// tablet modal styles - we create a centered modal here
top: 25%; width: 50%; left: 25%;
min-height: 0;
overflow: visible;

&.ng-leave {
opacity: 0;
top: 650px;
}

As you can see we've added a small hack to correctly hide the modal. Otherwise the modal does not slide out.
Another problem is that we cannot animate the backdrop because .ng-leave is applied to the child modal container. As a result the backdrop stays on screen until the modal ist completely removed (after animation).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.