I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) 자바스크립트 모달 구현하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 6. 27. 23:58

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<style>
    #outer {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }
 
    #outer .inner {
        position: absolute;
        background-color: #fefefe;
        width: 25%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
 
    #outer .inner .title {
        width: 100%;
        height: 70px;
        line-height: 70px;
        background: #333333;
        text-align: left;
    }
 
    #outer .inner .title span {
        padding-left: 30px;
        font-size: 20px;
        color: #ffffff;
    }
 
    #outer .inner .content {
        padding: 20px;
    }
 
    #outer .inner .btn_close {
        position: absolute;
        right: 20px;
        top: 8px;
        font-size: 35px;
        font-weight: bold;
        z-index: 100;
        color: #ffffff;
        opacity: 0.7;
    }
 
    #outer .inner .btn_close:hover,
    #outer .inner .btn_close:focus {
        opacity: 1;
        cursor: pointer;
    }
 
    @media screen and (max-width: 768px) {
        #outer .inner {
            width: 85%;
        }
    }
</style>
 
<button id="btn_open">modal open</button>
 
<div id="outer">
    <div class="inner">
        <span class="btn_close">&times;</span>
 
        <div class="title">
            <span>TITLE</span>
        </div>
 
        <div class="content">
            CONTENT
        </div>
    </div>
</div>
 
<script>
    var outer = document.getElementById('outer');
    var btn_open = document.getElementById("btn_open");
    var btn_close = document.getElementsByClassName("btn_close")[0];
 
    btn_open.onclick = function () {
        outer.style.display = "block";
    };
 
    btn_close.onclick = function () {
        outer.style.display = "none";
    };
 
    window.onclick = function (event) {
        if (event.target == outer) {
            outer.style.display = "none";
        }
    }
</script>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 제이쿼리 특정 객체 X축 위치 가져오기  (0) 2021.06.29
(즐거웅코드) 제이쿼리 특정 class를 가진 객체 유무 확인하기  (0) 2021.06.28
(즐거웅코드) 제이쿼리 우측에 따라다니는 플로팅 메뉴 만들기  (0) 2021.06.26
(즐거웅코드) CSS checkbox 배경색, 아이콘 커스텀 하기  (0) 2021.06.25
(즐거웅코드) CSS ol li 좌측 숫자 카운팅 없애기  (0) 2021.06.24

관련글

댓글 0

티스토리툴바