티스토리 뷰

IT tech Coding/php

[php+javascript+html+css] 나만의 디자인 모달 만들기....

Coding Life 2024. 5. 29. 22:13
반응형

웹사이트를 보면서 멋진 모달을 만들면 나만의 모달을 만들 수 있을까?

한번쯤 생각해 본 것인데,

 

한번 도전해서 만들어봤는데...

나름 나쁘지 않네요~

위와 같은 단순한 형태의 모달이지만,

부트스트랩의 모달을 잘 사용하고 있는데, 나만의 커스터마이징한 모달을 만들고 싶었습니다.

혹시 모달을 나만의 형태로 만들려고 노력하는 분들에게 코드를 공유해 봅니다.

차근차근 스탭을 밟아보면 나름 괜찮은 것 같아요^^

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Modal</title>
    
<style>
/* styles.css */
body {
    font-family: Arial, sans-serif;
}

#openModalBtn {
    padding: 10px 20px;
    font-size: 16px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    padding-top: 30px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    animation: fadeIn 0.5s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-header {
    /* background-color: #007bff; */
    background-color: #1f48d4;
    color: white;
    padding: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 15px;
}

.close {
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

.modal-body {
    padding: 15px;
}

.card {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


</style>	
	
</head>
<body>
    <button id="openModalBtn">Open Modal</button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">Modal Title</span>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="card">
                    <p>This is a custom modal window with card content.</p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>


<script>
// script.js
document.addEventListener('DOMContentLoaded', (event) => {
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("openModalBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
});


</script>

 

반응형
저작자표시 비영리 변경금지

'IT tech Coding > php' 카테고리의 다른 글

[php] if(empty($outsourcing)) 이 조건문은 null 이나 '' 전부 잡아내나?empty에 대해 알아보자구요.  (0) 2024.06.12
[자바스크립트 + php] pdf 파일 만들때 1페이지에 맞춤해서 출력하는 방법  (2) 2024.06.10
php 회사 도장발주에 사용하는 코드 중 도장색상을 다른 것만 badge로 표시하기  (0) 2024.05.20
php+javascript 매출 차트 만들기 feat GPT  (0) 2024.05.19
[php 오류] 오류: SQLSTATE[HY000]: General error: 1525 Incorrect DATE value: ''  (0) 2024.05.05
댓글