Muscardinus

Modal Window 본문

FrontEnd/Basic Skills

Modal Window

Muscardinus 2022. 3. 19. 21:20
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>POST</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div>
    <div class="container">
        <div class="row">
            <div class="col">
                <ul class="image-lists" style="width: 500px; margin: 0 auto">
                    <!--
                    <li class="image-list"
                        data-user="{&quot;name&quot;:&quot;Dmitriy Frantsev&quot;,&quot;instagram_username&quot;:&quot;vapricot&quot;,&quot;medium&quot;:&quot;https://images.unsplash.com/profile-1610980855110-bfec9a5ac55dimage?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=64&amp;w=64&quot;}"
                        data-image="https://images.unsplash.com/photo-1611077094636-7e961b38de30?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MXwxOTg1MzV8MHwxfGFsbHwxfHx8fHx8Mnw&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"
                    >
                        <img src="https://images.unsplash.com/photo-1611077094636-7e961b38de30?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MXwxOTg1MzV8MHwxfGFsbHwxfHx8fHx8Mnw&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080" alt="woman in black crew neck shirt">
                    </li>
                    -->
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="custom-modal">
    <div class="layer d-flex justify-content-center align-items-center">
        <div class="wrap d-flex justify-content-between" style="width: 600px">
            <img class="w-50 thumbnail" src="https://via.placeholder.com/600">
            <div class="profile w-50">
                <div class="d-flex justify-content-start align-items-center" style="margin-bottom: 10px">
                    <img  class="profile-image rounded-circle" src="https://via.placeholder.com/600" alt="">
                    <div class="info">
                        <h4 class="name">작가 이름</h4>
                        <p>@<span class="insta">작가 인스타그램</span></p>
                    </div>
                </div>
                <p class="body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorem eius error eum excepturi expedita facere inventore ipsa, laboriosam laudantium magnam magni numquam, odio placeat quam rem vitae voluptate voluptates!
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorem eius error eum excepturi expedita facere inventore ipsa, laboriosam laudantium magnam magni numquam, odio placeat quam rem vitae voluptate voluptates!
                </p>
            </div>
        </div>
    </div>
</div>

<script src="axios/axios.js"></script>
<script src="main.js"></script>
</body>
</html>

 

const accessKey = "hPyF-tz9tHnxeaoTwb7q0GTw10Wxwr85cD63lk7d7UE";
const imageLists = document.querySelector('.image-lists');
const modal = document.querySelector('.custom-modal');
const thumbnail = modal.querySelector('.thumbnail');
const profileImg = modal.querySelector('.profile-image');
const userName = modal.querySelector('.name');
const insta = modal.querySelector('.insta');

const imageApi = async () => {
    // 이미지 API 통신
    const res = await axios.get("https://api.unsplash.com/photos/", {
        params: {
            client_id: accessKey
        }
    });
    return res;
};

const render = async (callApi, callTemplate) => {
    // 콜백 함수
    const res = await callApi();
    callTemplate(res);
}

const imageTemplate = (res) => {
    // 이미지 템플릿 및 클릭 이벤트 추가
    const images = res.data;
    for (const image of images) {
        const {urls, alt_description, user} = image;
        const {name, instagram_username, profile_image: {medium}} = user;
        const li = document.createElement("li");
        li.classList.add("image-list");
        li.dataset.user = JSON.stringify({name, instagram_username, medium});
        li.dataset.image = `${urls.regular}`;
        li.innerHTML = `<img src="${urls.regular}" alt="${alt_description}">`;

        imageLists.appendChild(li);

        li.addEventListener("click", function () {
            const obj = {
                image: this.dataset.image,
                ...JSON.parse(this.dataset.user),
            };
            modal.classList.add("active");
            thumbnail.src = obj.image;
            profileImg.src = obj.medium;
            userName.textContent = obj.name;
            insta.textContent = obj.instagram_username;
        })
    }
}

(async () => {
    // 이미지 표기 및 Modal 이벤트 추가
    await render(imageApi, imageTemplate);
    modal.addEventListener("click", function(e) {
        const target = e.target;
        const isLayer = target.classList.contains("layer");

        isLayer && modal.classList.remove("active");
    });
})();
728x90

'FrontEnd > Basic Skills' 카테고리의 다른 글

Loading  (0) 2022.03.20
Scroll Indicator  (0) 2022.03.20
Rating UI  (0) 2022.03.19
Radio Box  (0) 2022.03.17
Dropdown Menu  (0) 2022.03.13
'FrontEnd/Basic Skills' Related Articles more
Comments