Design a container to appear on top of screen like pop-up

Design a container to appear on top of screen like pop-up

  

Hi,

I want to design a popup like below, which appears from bottom.



Should appear from bottom & Background will transparent, so that actual screen can be seen.

I know there is Action sheet in Outsystems, but how can I customize it. I don't want the Cancel button in bottom, If I go through it.

Thanks

Hi Tiger,

if you want to hide cancel.  make action-sheet-cancel  display to none 


.action-sheet-cancel {
    display: none;
}

to reduce padding 


.action-sheet {
    padding: 0px;
}

after that, it will look like below


Regards,

Pant

S pant wrote:

Hi Tiger,

if you want to hide cancel.  make action-sheet-cancel  display to none 


.action-sheet-cancel {
    display: none;
}

to reduce padding 


.action-sheet {
    padding: 0px;
}

after that, it will look like below



Regards,

Pant

Thanks Pant,

But how can I disable the Button Placeholder Click.

Coz If I designed a custom layout on any one button than its background will react to click as it is a kind of button in action sheet.



It's done :)


.action-sheet-container--visible {
  pointer-events: none;
}

see in the action sheet we only have the button placeholders, not the button so hear you can have three solutions,

1-put your content inside the button placeholder.

2-clone the pattern and make your own custom placeholder

3-create your own div that looks like a popup using CSS with some backdrop.


Regards

Pant

No need for creating custom Div,

I optimized it by this way & it achieved :

I am making the entire design in ActionSheet Button Place holder & I have disable there Click via Pointer property, Also I have placed custom button in my design thus to make my buttons clickable I manually set the Click via Pointer again :)


Design:

I designed my entire pop-up UI in Button Placeholder



Output:

My Button yes & No are clickable , whereas the button Placeholder that is white BG is disabled through CSS.



Here is My Custom CSS Override for Action Sheet;

.action-sheet-cancel {
    display: none;
}

.action-sheet {
    padding: 0px;
    height: 50%;
    background-color: #fff;
    pointer-events: none;
}

.action-sheet-container--visible {
  pointer-events: none;
}

.action-sheet-actions .btn {
    border: none;
    height: 50%;
    margin-left: 0;
    width: 70%;
    pointer-events: auto ;
}


- Assif

assif_tiger wrote:

No need for creating custom Div,

I optimized it by this way & it achieved :

I am making the entire design in ActionSheet Button Place holder & I have disable there Click via Pointer property, Also I have placed custom button in my design thus to make my buttons clickable I manually set the Click via Pointer again :)


Design:

I designed my entire pop-up UI in Button Placeholder



Output:

My Button yes & No are clickable , whereas the button Placeholder that is white BG is disabled through CSS.



Here is My Custom CSS Override for Action Sheet;

.action-sheet-cancel {
    display: none;
}

.action-sheet {
    padding: 0px;
    height: 50%;
    background-color: #fff;
    pointer-events: none;
}

.action-sheet-container--visible {
  pointer-events: none;
}

.action-sheet-actions .btn {
    border: none;
    height: 50%;
    margin-left: 0;
    width: 70%;
    pointer-events: auto ;
}


- Assif


Great :)

Solution

I faced some issue with this, The tap was going on back scree i.e parent.

I redesigned this with custom & Simple Container.I have created a custom pop-up that works & behave like a bootstrap modal in mobile applications.

Here is the Design & Steps below :

1- Add one empty Container for parent in Screen Bottom Content & apply below style to it

.parent{
    
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
}


2- Add a Child Container under parent for your actual pop-up design in Screen Bottom Content.


.childDesign{
    background-color: #fff; 
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 50%;
    padding: 40px;
}


Working perfect, Also handling the back tap on it , You can use Action & Hide it based on Flag Variable that can be set & unset on respective action.

Make sure to keep the Modal Parent Container in bottom Section at the last.

Cheers.


Solution