171
Views
6
Comments
how to change popup backdrop style for particular popup
Question
Application Type
Reactive

Hello everyone,

In home screen im using 8 popups but for a particular pop up lets say : Filter popup , for this particular pop up i need to change .popup-backdrop css.

when im trying to change then all other popup(8) behavior is changing. i wantonly filter popup behavior to be changed.


can someone suggest solution for this,


Regards.

2018-10-29 08-31-03
João Marques
 
MVP

Hi salman,


Add the OnReady event to your screen and add the following JavaScript to give a special class to the body element, in my case the class body-with-special-popup, like in the screenshot below:


Then the CSS to your specific popup should take into account only the popup-backdrop inside the body with that specific class, like in the example below:


body.body-with-special-popup .popup-backdrop {
     opacity: 100%;
}


Kind Regards,
João

UserImage.jpg
Bilalhussaini Sayyed

Hi Thanks for the response but my concern is ,

in my case pop-backdrop is using by all 8 popups , i need to change only for filter popup behaviour.

filterpopup has different css...but for the behaviour like fliter popup need to show from the rifht. for this i need to change this popupbackdrop but im unable to do that..

if im changing this popupbackdrop all other popus behaviour is changing.


Regards.

2023-06-15 06-47-16
Monica Anne Laurente

Have you figured this out? If so, how did you do it? I'm also having the same problem but can't find a solution. Custom class isn't working either.

UserImage.jpg
Bilalhussaini Sayyed

HI Monica,


my requirement was only one popup sould be right end remaining all popups center of the screen.

i was not able to change default css so i have created custom style for width and height as per requirement and  to display right below code.

so for that one popup i have used this css  as shown below.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Monica Anne Laurente ,

see attached oml.

To allow for only some popups to have a special backdrop, i created a wrapper webblock that makes sure the backdrop of the popup in it has the right class through adding property with javascript.

The reason it is a wrapper block with a placeholder for the popup is one of timing : the onRender of the wrapper block only fires after the popup is added to the DOM, ensuring the javascript to change the property can find it.

Dorine

SpecialBackdrop.oml
2020-07-27 11-07-36
Diksha Magre

Hi Monica,

You can solve this problem with CSS.

You can add a custom Class in Popup  Style and Apply Css for a Custom Class.

I have attached the updated OML.

hope this will help you.

Thanks,

Diksha Magre

Popup.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.