arcgis api 3.X 修改自带弹窗样式 2022年6月12日

简介: 自带的弹窗介绍:arcgis api 3.X 修改自带弹窗样式插图/*修改原有弹窗的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

自带的弹窗介绍:

网络异常,图片无法展示
|

/*修改原有弹窗的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;
}
相关文章
|
5月前
|
前端开发 JavaScript API
2024 Web 新特性 - 使用 Popover API 创建弹窗
Popover API简化了Web弹窗创建,标准化处理在所有主要浏览器中可用。它提供声明式创建弹出式菜单、提示和信息卡片,解决代码冗余和兼容性问题。弹窗自动定位在顶层,支持通过Esc键或点击外部关闭,且与触发元素语义关联。基础用法涉及`popover`和`popovertarget`属性。
85 0
|
人工智能 数据可视化 API
ArcGIS API for Python
ArcGIS API for Python
66 0
|
Windows
ArcGIS:如何连接文件夹、修改元数据样式、建立个人地理数据库、复制移动文件?
ArcGIS:如何连接文件夹、修改元数据样式、建立个人地理数据库、复制移动文件?
361 0
|
JavaScript 前端开发 应用服务中间件
Arcgis api for javascript 详细部署
Arcgis api for javascript 详细部署
|
人工智能 数据可视化 数据管理
ArcGIS API for Python
ArcGIS API for Python
112 0
|
定位技术
绝美的ArcGIS Pro的制图样式
大家好,我是南南 最近张云金老师,搞了一个制图比赛。不要报名费的那种!!! 我寻思吧,我对制图玩的也不多,但是我有不少ArcGIS Pro的制图样式存货。所以我就准备分享给大家啦
302 0
|
数据可视化 数据管理 API
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
Revit API 修改视觉样式(Visual Style)
Revit API 修改视觉样式(Visual Style)
|
JavaScript 前端开发 定位技术
ArcGIS API For JavaScript官方文档(六)之设置范围
ArcGIS API For JavaScript官方文档(六)之设置范围
|
存储 JSON 前端开发
ArcGIS API For JavaScript官方文档(一)之默认API配置
ArcGIS API For JavaScript官方文档(一)之默认API配置