Html 如何使用Jquery和CSS在同级div上打开div

你好，当用户点击地图上的某个点时，我正试图为他们创建一个更友好的用户界面。我希望弹出按钮从div地图的底部垂直（从下到上）打开一个弹出窗口。这是一个移动应用程序，没有太多的工作空间。因此，我看到一些应用程序从地图底部打开弹出信息，并用弹出信息覆盖地图的1/3

我在这里创建了一个JSFIDLE

文件
#地图{
高度：700px；
宽度：500px；
背景色：rgb（52,58,64）；
}
.弹出窗口{
显示：无；
背景色：蓝紫色；
宽度：500px；
}
测试
弹出窗口
信息这需要经过地图部门

电话：324234

电邮：asdfsa@ssdf.sdf
测试和稀释
var map=L.map（'map'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
L.标记（[51.5，-0.09]）。添加到（地图）
.bindPopup（'一个漂亮的CSS3弹出窗口。
易于定制。'）
$（“#popubtn”）。单击（函数（）{
$（“popupdiv”）.show（“幻灯片”{
方向：“向下”
}, 600);
})

我想这就是你需要的。我使用z-index将弹出窗口放在地图的顶部，使用固定定位将弹出窗口放在底部

每个设备上的弹出窗口高度相同：屏幕的30%。with是固定的，因为地图的宽度是固定的，因此弹出窗口也是固定的

如果弹出窗口需要是地图高度的30%，则可以是绝对值

var-map=L.map（'map'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
L.标记（[51.5，-0.09]）。添加到（地图）
.bindPopup（'一个漂亮的CSS3弹出窗口。
易于定制。'）
$（“#popubtn”）。单击（函数（）{
$（“popupdiv”）.show（“幻灯片”{
方向：“向下”
}, 600);
})

#地图{
高度：700px；
宽度：500px；
背景色：rgb（52,58,64）；
位置：相对位置；
z指数：10；
}
.弹出窗口{
显示：无；
背景色：蓝紫色；
宽度：500px；
高度：30vw；
位置：固定；
底部：0；
z指数：20；
}

测试
弹出窗口
信息这需要经过地图部门

电话：324234

电邮：asdfsa@ssdf.sdf
测试和稀释

希望这对您有所帮助

如果使用position:absolute，则应该具有相对于其父div的位置

谷歌地图（.传单底部）的z-索引值为1000，所以把我们的弹出窗口放在地图上，我们应该有更高的弹出窗口的z-索引值，因此我把z-索引值1001放在弹出窗口中

var-map=L.map（'map'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
L.标记（[51.5，-0.09]）。添加到（地图）
.bindPopup（'一个漂亮的CSS3弹出窗口。
易于定制。'）
$（“#popubtn”）。单击（函数（）{
$（#popupdiv”）.show（“幻灯片”{方向：“向下”}，600）；
})

文件
#地图{
高度：500px；
宽度：300px；
背景色：rgb（52,58,64）；
}
.弹出窗口{
显示：无；
背景色：蓝紫色；
宽度：300px；
位置：绝对位置；
底部：0；
z指数：1001；
}
.集装箱{
位置：相对位置；
}
测试
弹出窗口
信息这需要经过地图部门

电话：324234

电邮：asdfsa@ssdf.sdf
测试和稀释

谢谢你的帮助。所以你需要绝对的定位。底部：0使其从底部开始，z索引为1001。我投了1000球，但并没有超过上限。我明白了，非常感谢你！谢谢Gerard，我认为Prakash的上述评论效果很好。谢谢你的帮助！