0
私はすべてのポップアップパネルの構造を持っています（必要な機能のため変更できませんでした）。そのうちの1つはマップdivですが、親は固定位置とマップdivですそれはmap showボタンを持っていますが、それをクリックする前にアップして放置した結果パネルをドラッグしてください2つの固定位置の親を持つleafletjsマップdivを修正しました
：どのように固定された親のdiv
の設定に私はそのためのフィドルを作る感知することができませんでした正確な問題が表示されたら、ボタンをクリックしてください
地図のdivが存在するがメインマップの座標が表示されたら中央に設定されておらず、また左にドリフトしています
これで小さなドラッグ結果パネル（フィドルのパネル）になりますが、正しいマップが表示されます
このCSSの問題を解決するにはどうすればよいですか？
CSS：
#popup{
position: fixed;
z-index: 9998;
background-color: rgba(0,0,0,.3);
height: 100vh;
width: 100vw;
display: none;
overflow: auto;
}
#parent{
background-color: #00ff26;
position: fixed;
z-index: 9999;
padding: 5px;
display: none;
border-radius: 10px;
}
#parent *{
padding: 2px;
border-radius: 5px;
display: block;
margin-bottom: 5px;
}
#map{
height: 320px;
width: 320px;
}
HTML：
<div id="popup">
<div id="parent">
<!--this map is in two fixed div parent that not work-->
<div id="map"></div>
</div>
</div>
<input type="submit" value="show map" id="mapbt">
<!--this map is worked please uncomment it by ctrl +/and comment upper #map -->
<!-- <div id="map"></div> -->
JS：
function mapper(mapID) {
centerPoint = [51.5, -0.09];
zoom = 16;
var map = L.map(mapID, {
center: centerPoint,
maxZoom: 22,
zoom: zoom,
zoomControl: true,
attributionControl: true,
doubleClickZoom: false
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OSM</a> contributors'}).addTo(map);
L.marker(centerPoint, {draggable: true}).addTo(map);
}
function setPopup(panel, parentModal) {
parentModal.css("display", "inline-block");
this.close = function close() {
panel.css("display", "none");
parentModal.unbind("click").css("display", "none");
}
parentModal.click(close);
panel.submit(close);
var w1 = panel.outerWidth()/2,
h1 = panel.outerHeight()/2,
w2="50vw",
h2 = "50vh";
panel.css({"display": "inline-block", "top": "calc(" + h2 + " - " + h1 + "px)", "left": "calc(" + w2 + " - " + w1 + "px)"});
}
$("#mapbt").click(function(){
setPopup($("#parent"), $("#popup"));
})
mapper("map");