如何在此代码中正确包装 div 组件？

Question

我正在尝试实现 Javascript 组件，该组件在地图上显示一些固定位置和信息。我添加了到目前为止的内容。它在这里有效，但不幸的是，它在网站上显示的尺寸不正确。那部分有一个单选按钮。 Javascript 是如果值==位置，显示模态 class.

<div class="basket_totals_radios_float">
    <div class="row" style="padding: 1rem">
        <div class="col-xs-12">
            <input type="radio" name="basket_choose_delivery_type" id="basket_choose_delivery_type" value="location" class="template_fl delivery_radio_button" />
            <label for="" style="font-size: 16px;font-family: ProximaNovaSemiBold; text-transform: uppercase;">locations</label>
            <br>
            <p>show locations..</p>
        </div>
    </div>
</div>

示例代码在此处有效，但在现场无效；

window.easyPackAsyncInit = function() {
        easyPack.init({
            defaultLocale: 'uk',
            instance: 'uk',
            filters: true,
            apiEndpoint: 'https://api-uk-points.easypack24.net/v1',
            closeTooltip: false,
            points: {
                types: ['parcel_locker']
            },
            map: {
                initialTypes: ['parcel_locker'],
                defaultLocation: [54.2578673, -6.8223541]
            }
        });
        var map = easyPack.mapWidget('easypack-map', function(point) {
            alert(point.name);
        });
    };
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

 .modal {
        display: none;
        position: fixed;
        z-index: 99999;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }
.modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
     
.close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    
.close:hover,
.close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

<link href="https://geowidget.easypack24.net/uk/js/easypack.css" rel="stylesheet"/>
<script src="https://geowidget.easypack24.net/uk/js/sdk-for-javascript.js"></script>
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Locations</p>
        <div id='easypack-map'></div>
    </div>

</div>

有什么想法吗？

感谢您的帮助。

Answer 1

这是一个 CSS 问题。因为我从您的代码中删除了 CSS，所以我可以看到同样损坏的界面。

您可以在 chrome/edge、firefox 或 safari 中使用 devTools（检查），查看“网络”选项卡，如果可以，您可以看到有关加载数据的一些信息。

我从 easypack.css 中删除了内容，尝试在“网络”选项卡上查找有关此文件的一些信息。

有关“网络”选项卡的详细信息，请参阅：https://developers.google.com/web/tools/chrome-devtools/network

这是针对 chrome 但所有浏览器都相似。

祝你好运

如何在此代码中正确包装 div 组件？

How to wrap div component properly in this code?

html

javascript

css

jquery

implementation