topic Re: Transparent popup window in ArcGIS JavaScript Maps SDK Questions

Transparent popup window

NaciDilekli — Thu, 30 Jun 2016 18:53:14 GMT

Hello,

Is there a way to make the esri.dijit.Popup transparent? I tried domStyle.set(popup.domNode, "opacity", 0.1) but there is still no transparency. Thanks!

Re: Transparent popup window

RobertScheitlin__GISP — Wed, 06 Jul 2016 13:53:23 GMT

Naci,

You can adjust the popups opacity by adding some CSS overrides but the issue is the pointer on the popup is not a real arrow/triangle it is a square rotated and when you set the opacity of the popup the pointers hidden portion of that square is now visible and look horrible.

Re: Transparent popup window

NaciDilekli — Mon, 11 Jul 2016 17:52:42 GMT

Thank you Robert,

Could you tell what specific overrides they would be. Do you have a CSS example that produces that screenshot?

Thanks, Naci

Re: Transparent popup window

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:30:36 GMT

Naci,

Sure it is:

.esriPopup .contentPane {
    background-color: rgba(257, 247, 247, 0.75);
}
.esriPopup .titlePane {
    background-color: rgba(72, 85, 102, 0.75);
}
.esriPopup .actionsPane {
    background-color: rgba(257, 247, 247, 0.75);
}
.esriPopup .pointer, .esriPopup .outerPointer {
    background-color: rgba(257, 247, 247, 0.75);
}

Re: Transparent popup window

NaciDilekli — Tue, 12 Jul 2016 15:22:00 GMT

Great! Thanks!