arcgis api 3.X 修改自带弹窗样式

爱被打了一巴掌 2021-07-24 16:09 432阅读 0赞

自带的弹窗介绍：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

修改：

/*修改原有弹窗的css样式*/
      /* 弹窗整体 */
    .esriPopup {
        font-size: 16px;
        box-shadow: 10px 10px 5px #888888;
    }
    .esriPopup .sizer {
        position: relative;
        width: 400px;  //弹窗宽度
        z-index: 1;
    }
      /* 标题部分 */
    .esriPopup .titlePane {
        background-color: rgba(7, 128, 207, 0.6) !important;
        font-size: 16px;
        line-height: 30px;
    }
      /* 标题部分的最大化按钮隐藏 */
    .esriPopup .titleButton.maximize {
        display: none;
    }
    
    
    /* 下一个动作按钮 */
    
    .esriPopup .titleButton.next {
        right: 33px;
        background-position: -16px 0;
        width: 9px;
        height: 17px;
        background: url(../images/infowindow/close.png) no-repeat;
        display: none;
    }
      /* 修改标题关闭按钮 */
    .esriPopup .titleButton {
        background: url(../images/infowindow/close.png) no-repeat;
    }
    
    
    
    /* 弹窗主要内容部分 */
    
    .esriPopup .contentPane {
        position: relative;
        max-height: 600px;
        line-height: 35px;
        overflow: auto;
        font-weight: 600;
        padding: 10px 6px 6px 10px;
        background-color: rgba(72, 170, 194, 0.6);
        color: #333333;
        /* background: url(../images/infowindow/selected_tab.png); */
        background-size: 100% 100%;
        background-position: center center;
    }
    /* 修改弹窗显示的时候，有个小三角对着被选中的要素 */
    .esriPopup .pointer,
    .esriPopup .outerPointer {
        background: rgba(72, 170, 194, 0.5);
        ;
    }
    
    
    /* 下方动作按钮 */
    
    .esriPopup .actionsPane {
        display: none;
    }
    
    
    /* 关闭按钮 */
    
    .esriPopup .titleButton.close {
        right: 3px;
        background-position: 0 0;
        width: 25px;
        height: 30px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/3cb89895a93c457d92b2ddca3adea116.png