Custom modal / alert (with HTML, form...)

Thank you very much.

1 Like

is there a way to make the animations default for modal?

enterAnimation: 'modal-alert-pop-in',
leaveAnimation: 'modal-alert-pop-out'

i just dont feel good in writng the same thing all over the app.

I don’t know how it would be possible to make it default. I guess you could use abstract classes or components

I need to implement faceted filter search in my project. the concept of this search is that user can see background page where results are updated once they tick a filter or type other keywords. the search refined that way.

I am not sure what to use to do this, is having a modal page as the search page with filters opening like a sliding menu to achieve this ?? or maybe use the dual feature menu , the one that slide from right or any other means to accomplish this if its possible?

I am looking for some advice , thanx

Bro i use your code but im getting a darker background on .fixed-content do you know what im doing wrong?

I faced recently something like this too on iPad due to the last Ionic css changes inside the framework.

For my app I solved it like following, don’t know if it will solve your problem, but it deserve a try I guess:

1- Add a css class attribute to your modal (note: you could also not set an attribute and use !important in your css but I don’t like that, I rather set a style)

let modal: Modal = this.modalController.create(MyModal, {
            aParam: this.myParam
        },
        {
            enterAnimation: 'modal-alert-pop-in',
            leaveAnimation: 'modal-alert-pop-out',
            cssClass: 'my-modal' // <---- HERE the new attribute
        });

2- In the css, set the box-shadow to none. Pay attention, set it outside your component, that’s why pay attention to use a unique css class attribute name

your-component {
}

ion-modal {
  &.my-modal {
    div.modal-wrapper {
        box-shadow: none; // <---- This was the shadow I faced
    }
 }

Ahh i tried but did not work, i will keep trying! Thank you for your time :slight_smile:

1 Like

Ok if someone find the same problem this is how i solved with @reedrichards help.

page-modal-add-qty {

ion-content {
    &.content {
        div.scroll-content {
            top: 10%;
            left: 10%;
            width: 80%;
            height: 30%;
            overflow:hidden;
        }
    }

    &.content-ios {
        background-color: rgba(0, 0, 0, 0.3);

        div.scroll-content {
            background-color: #f8f8f8;
            border-radius: 13px;
            padding: 16px;
        }
    }

    &.content-md {
        background: inherit;
        
        div.scroll-content {
            background-color: #fafafa;
            border-radius: 2px;
            box-shadow: 0 16px 20px rgba(0, 0, 0, 0.4);
            padding: 24px;
        }
    }
}

}

ion-modal {
&.my-modal {
div.modal-wrapper {
box-shadow: none; // <---- This was the shadow I faced
}
}}

2 Likes

congrats for finding your solution @lucasarts321!

Just my 2cts here, but wouldnt it be a better option to override sass variables on inset dimensions and border radius for some of the issues mentioned?

I have set inset dimensions to 90% in my project and works like a charm on tablets. Same for popover.

But then all your modal have the same size.

Furthermore having a custom modal allows you to put more than “just” text and a default button in a modal. For example in my case I needed a title, subtitle, slides with images, text, custom button etc.

Depends on the business need I guess…

1 Like

Hey,
I want to style my modal like a alert but I am not able to do so.
I tried the .modal-wrapper solution and ion-modal solution but none of that worked for me…I can’t think of any way.

Use popover? . …

Thanks…it serves my purpose

For anyone expecting news in this thread:

I tried before but had not found a generic way to make modals behave the way as I desired.

So I struggled a bit and achieved responsive modals and other kinds of modals with the following global scss:

ion-modal {
	&.my-modal-inner {
		display: flex;
		align-items: center;
		justify-content: center;

		ion-backdrop {
			visibility: visible;
		}

		.modal-wrapper {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			overflow: auto;
			width: auto;
			height: auto;
			left: auto;
			top: auto;
			contain: content;
			
			max-width: 70%;
			max-height: 70%;

			border-radius: 2px;
			box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);

			> .ion-page {
				position: relative;
				display: block;
				width: auto;
				height: auto;
				contain: content;
				box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
			}
		}

		&.my-stretch {
			.modal-wrapper {
				overflow: hidden;
				width: 100%;
				height: 100%;

				> .ion-page {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
		
	&.my-fullscreen {
		.modal-wrapper {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}	
}

You can have responsive modals that will have the size of the inner content using cssClass: 'my-modal-inner':

The modal will occupy at maximum 70% of the width and height (like defined in the above css) when the content surpasses the limit:

If the content of the modal is supposed to occupy all the container element (like a page or a component with ion-content), it will not work well with the above case because the modal supposes that the container should have the size of its children, causing a possibly undesired behaviour (the modal will be very small, more than it should):

Instead, you can define the modal to occupy its maximum size with cssClass: 'my-modal-inner my-stretch':

If you want the modal to be full screen, even in a large desktop browser, you can use cssClass: 'my-fullscreen':

Notes:

  1. You can change the prefix my- with any other prefix of your choice (or no prefix).
  2. You can change the maximum width and height of the modal in the above css, as you seem fit (I defined both as 70%).
  3. The above screenshots were taken in a desktop browser, but the modal changes also work in a mobile/native app with Ionic (I tested in Android, and it should work in iOS too).
2 Likes

Thank you for the solution. You saved my day

good idea you had back then, I may give a try with v4 to solve the “custom modal” question with a popover instead of trying x hours to (re)style my v3 custom modal…

Yep looks like it’s the easiest pass to convert a v3 custom modal build like above to a v4 custom modal :slight_smile: thx again @tommertom for the idea :+1:

I’m not yet finish, but here you go

  1. Use a popoverController like the following to replace your modalController

     const modal: HTMLIonPopoverElement = await this.popoverController.create({
         component: YourOldModal,
         componentProps: {
             optionalParam: 'value'
         },
         ev: null,
         enableBackdropDismiss: null
     });
    
    await modal.present();
    
  2. When you migrate your modal, if you had a ion-content tag in your html code, replace it with a div for example or remove it

  3. Add a bit of force scss like

    ion-popover {
          &.popover-ios, &.popover-md {
           div.popover-content {
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: 80%;
          }
        }
    }
    

I know it sucks to use !important, first time I have too :frowning: but maybe it will be better in the future :slight_smile:

2 Likes

Backdrop Dismiss doesn’t work in this situation.

IS the same way to add padding for Ionic 4? because that way does not work