Modal 창 구현

목표 : 이전에 만든 다양한 이미지 마커 생성 지도에서 infowindow 의 content에 버튼을 생성하고

그 버튼을 누르면 해당 카페(편의점/음식점)의 제휴 할인 쿠폰이 Modal로 나오도록 구현

 

Bootstrap 5.1 에서 구현하기 위해 html에 Modal 내용을 작성하고 script 에서 버튼 클릭시 Modal 나타나도록 함수를 설정하여주었다. 

script의 지도 관련 내용 중 데이터베이스에서 해당 카페 상호명과 같은 데이터를 가져와야하기때문에 동일한 script 안에서 함수를 작성하여줬다.

 

function run(obj) {
    console.dir(obj);
    const options = {
    };
  
    var myModal = new bootstrap.Modal(document.getElementById('myModal'), options);
    myModal.show();
    console.dir(myModal);    

}
    
function getData(){
    fetch('/coffee/data')
    .then(response => response.json())
    .then(data => {
        data.forEach(v => {
            const lat = v.latitude;
            const lng = v.longitude;
            const id = v.id;
           
            const content = `<div class="info-box"> 상호명: ${v.coffeestore} <br> 주소: ${v.address} <br><a href="${v.link}" target="_blank">주소 보기</a> <br>
                <button class = "custom-btn btn-6" onclick="run('${v.coffeestore}')">쿠폰 리스트</buttton> </div>`;
            coffeePositions.push() ;
            
            createCoffeeMarkers(lat,lng,content);
            
        })

    })
}

button의 onclick 함수로 run()을 지정해주었다. 

 

Modal은 생성되지만 close나 a태그와 같은 기능은 비활성화되어 클릭 자체가 안된다..

너무 어렵네..하하