ArcGIS for JavaScript 修改 InfoWindow 样式的两种实现方式

通过 JavaScript 动态修改样式

第一种方法是通过 JavaScript 代码动态修改弹出窗口的 DOM 元素样式。具体实现如代码 所示，该函数通过 jQuery 选择器定位到标题栏、内容区和操作栏，并直接设置其背景色为半透明的深灰色（rgba(64,64,64,0.8)）。这种方法的优势在于可以在运行时根据用户交互或配置动态调整样式，无需刷新页面即可生效。

function popup()
{
  $(".esriPopup .titlePane").css({
'background-color':'rgba(64,64,64,0.8)'
  })
  $(".esriPopup .contentPane").css({
'background-color':'rgba(64,64,64,0.8)',
'color':'#FFFFFF'
  })
  $(".esriPopup .actionsPane").css({
'background-color':'rgba(64,64,64,0.8)'
  })
}

通过 CSS 类覆盖全局样式

第二种方法是通过定义 CSS 类来全局覆盖默认的 InfoWindow 样式。如代码 所示，该方法针对 .esriPopupWrapper 设置了背景图片、背景尺寸以及阴影效果，同时调整了内边距。对于标题栏、内容区和操作栏，分别设置了半透明背景色和文字颜色。此外，还自定义了滚动条的颜色属性，包括基础色、高亮色、箭头颜色等，以实现与整体界面风格一致的视觉效果。

.esriPopup .esriPopupWrapper
{
background-image: url(../images/beijingtu1.png);
background-size:100% 100%;
box-shadow: 0 0 0 #777777;
  -webkit-box-shadow: 0 0 0 #777777;
  padding:3em;
}
.esriPopup .titlePane
{
background-color:rgba(64,64,64,0);
}
.esriPopup .contentPane
{
background-color:rgba(64,64,64,0);
color:#FFFFFF;
scrollbar-base-color: #373737;
  scrollbar-3dlight-color: #4c4c4c;
  scrollbar-highlight-color: #373737;
  scrollbar-track-color: #808080;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: #373737;
  scrollbar-dark-shadow-color: #373737;
}
.esriPopup .actionsPane
{
background-color:rgba(64,64,64,0);
}

以上介绍了在 ArcGIS for JavaScript 中修改 InfoWindow 样式的两种主要方式。开发者可以根据实际需求选择动态 JS 修改或静态 CSS 覆盖，或者结合两者使用，以达到最佳的交互体验和视觉效果。