[Modal] Allow different modal positions on multi-modals. Added top and bottom aligned modal

[lubber-de]

Description

When a modal opened another modal, the positioning given by centered:false was broken. The first modal did not stay at it's supposed position.
Reason for this was, that modal positioning was done by applying top aligned to the page dimmer instead of the modal itself.

This PR now takes care of the positioning for each opened modal and keeps its position until it's closed.
In addition it also invents top aligned modal and bottom aligned modal

Hint: Unfortunately the current code already used the word top internally to mark the most active modal in the front and removed it again when the modal closes. No CSS Class for top was existing and it is not even documented. I therefore decided to rename the internal topto frontinstead, because i didn't want to name this upper aligned just to keep the internal top setting. top aligned is used everywhere else in the framework.

But, as i suggest this PR to be part of the next 2.7.x Release we can do one of 2 things:

1. Accept the PR as it is because the top-logic was only used internally, temporary and hidden undocumented
2. Consider this a breaking change. To avoid waiting for a major release, i would revert the settings for "front" and just change the current .top.aligned CSS settings to simply .aligned to still fix the belonging issues. I would then prepare another PR after the changes are merged to change back to "front" and ".top.aligned" for the next major release

Testcase

Click the button inside the modal to open the second one and watch how the modals ...

Broken

... change their position
https://jsfiddle.net/9pnmzgkc/

Fixed

... stay at their supposed position
https://jsfiddle.net/phk50two/

Additional Examples for top aligned modal and bottom aligned modal

https://jsfiddle.net/5ahkg7t1/

Alltogether

https://jsfiddle.net/4dxfsctj/

Multimodal with different Position

https://jsfiddle.net/46wLg1nu/

The modals with individual positions called from each other

https://jsfiddle.net/fpk01L54/

Screenshot

Closes

#530
Semantic-Org/Semantic-UI#6677
Semantic-Org/Semantic-UI#5883

[y0hami]

LGTM

I think this is fine and we can get away with changing top to front, I don't think its something people change especially since its undocumented.

[dutrieux]

Before my questions : thx for all your works !!! 👍 👍 👍

With this sample "Alltogether" https://jsfiddle.net/b1sa5863/2/

When you resize the windows, the center modal is display on the top : (I check on firefox and Chrome)

And I have a other question why there aren't dimmer on this sample, 3 modals are open but without dimmer on the first two ?

[lubber-de]

@dutrieux 🤔 Nice catch...i'll investigate.
And the reason why those modals dont't have a separate dimmer is, because the example opens the modals independently of each other. The dimmer occurs when a modal is called within the other modal.
When i have fixed the resize issue i'll prepare another example. I am currently on the road so i might only have time in the evening to look into all of this

[lubber-de]

@dutrieux Fixed it 😁 See altogether example here https://jsfiddle.net/fLbzpeun/

[lubber-de]

I still have to investigate into the whole center variant, so i've put this on hold...as said, i'll take care of it this evening 😉

[dutrieux]

I check https://jsfiddle.net/fLbzpeun/ and there is a problem on the bottom modal when you resize the window

And the modal center is blurred : the position is change by 1 pixel on y-axis too fast (or something like that) :
Modal 2 on center position :

Modal 2 on top position :

[lubber-de]

Yes, the new bottom modal was the reason. I think I fixed it with the latest commit. I still have to prepare the example fiddles again

[lubber-de]

@dutrieux It should be finally fixed now 🙏
I adjusted all examples in the original description, so for the resize issue try "altogether" here https://jsfiddle.net/vsgnymp0/ now
I also added a new example showing the wanted extra dimmer on the two other modals.Also changed the screenshot in the decription accordingly. As you will see, this time the modals are called from each other to trigger the blocking dimmers.
https://jsfiddle.net/jnw6ho78/

@hammy2899 Please review again

[y0hami]

LGTM

[dutrieux]

I fund something strange with your sample : https://jsfiddle.net/jnw6ho78/

When I open and close all modals the first time, there is no problem, but when I open and close all modals an other time, the scrollbar appears briefly :

I have the same problem on Chrome & Firefox & Edge

[lubber-de]

@dutrieux ok, hopefully the last needed fix 😅
Please try https://jsfiddle.net/fpk01L54/
The scrollbar should not appear anymore

[dutrieux]

Very nice, that work perfectly : juste one question, in your sample https://jsfiddle.net/fpk01L54/ and on modification of Modal.js, there is not this fix #427 too ?

[lubber-de]

The fix for #427 Is only partially implemented in the example for this PR because the fix for #427 needs more css and adjusted dimmer.js to be included in a fiddle. #427 is part of upcoming 2.7.3, so if this PR gets approved and merged also then both fixes will be released by 2.7.3

[y0hami]

LGTM

[ColinFrick]

LGTM