Блог

Главная - Вопросы по программированию - Как правильно обернуть компонент div в этом коде?

Как правильно обернуть компонент div в этом коде?

#javascript #html #jquery #css #implementation

#javascript #HTML #jquery #css #реализация

Вопрос:

Я пытаюсь реализовать компонент Javascript, который показывает некоторые закрепленные местоположения и информацию на карте. Я добавил то, что у меня было до сих пор. Здесь это работает, но, к сожалению, он не показывает правильный размер на сайте.введите описание изображения здесьВ этой части есть переключатель. введите описание изображения здесьJavascript — это если значение == местоположение, показать модальный класс.

 <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">amp;times;</span>
        <p>Locations</p>
        <div id='easypack-map'></div>
    </div>

</div>

есть идеи?

спасибо за помощь.

Ответ №1:

Это проблема CSS. Потому что я удалил CSS из вашего кода, и я вижу тот же сломанный интерфейс.

Вы можете использовать DevTools (inspect) в chrome / edge, firefox или safari, посмотреть на вкладке Сеть, если вы можете увидеть некоторую информацию о загруженных данных.

Я удалил содержимое из easypack.css, попробуйте найти некоторую информацию об этом файле на вкладке Сеть.

введите описание изображения здесь

Для получения дополнительной информации о вкладке сети см.: https://developers.google.com/web/tools/chrome-devtools/network

  • Это для Chrome, но все браузеры похожи.

удачи