Select to view content in your preferred language

Transparent popup window

3514
4
Jump to solution
06-30-2016 11:53 AM
NaciDilekli
Frequent Contributor

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!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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);
}

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

preview.jpg

NaciDilekli
Frequent Contributor

Thank you Robert,

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

Thanks, Naci

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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);
}
NaciDilekli
Frequent Contributor

Great! Thanks!

0 Kudos