Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

modal 본문

TIS_2016/HTML5_1기

modal

moozi 2016. 4. 6. 12:08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modal box</title>
    <style type="text/css">
        /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
     }

    /* Modal Content/Box */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 80%; /* Could be more or less, depending on screen size */
    }

    /* The Close Button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
     .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
   
    /* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;  /* 0.4초간 애니메이션 */
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0} /* 처음 위 쪽에서 */
    to {top: 0; opacity: 1} /* 나중 아래로 내려옴 */
 }   
    </style>
</head>
<body>
   
<button id="myBtn">Open Modal</button>

<!-- 버튼클릭시 보이는 컨텐츠 -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
      <div class="modal-header">
        <span class="close">×</span>
        <h2>공지사항</h2>
      </div>
      <div class="modal-body">
        <p>4/13일 국회의원선거</p>
        <p>소중한 한표를...</p>
      </div>
      <div class="modal-footer">
        <h3>중앙선거관리위원회</h3>
      </div>
    </div>
</div>


<script>
// myModal 아이디를 찾아서 엘리먼트를 가져옴
var modal = document.getElementById('myModal');

// myBton 아이디를 찾아서 엘리먼트를 가져옴
var btn = document.getElementById("myBtn");

// close라는 클래스를 찾아서 엘리먼트들을 가져옴. 배열이 생성됨.
// 배열의 첫번째 요소[0]만 span에 저장.   
var span = document.getElementsByClassName("close")[0];//span은 배열이 아님.
//var span = document.getElementsByClassName("close"); //span은 배열
   
// 버튼을 클릭하면 콜백함수 실행
btn.onclick = function() {
    modal.style.display = "block";// modal 보이게
}

// x버튼을 클릭하면 콜백함수 실행
span.onclick = function() {
    modal.style.display = "none";//modal 안보이게
}

// 윈도우 화면을 클릭하면 modal 안보이게. 옵션(선택적 사용)
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

 

</body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

자바스크립트 연습문제 풀이 1 ~ 16  (0) 2016.04.07
navigation 예제  (0) 2016.04.06
버튼예제  (0) 2016.04.06
tab  (0) 2016.04.05
accordian  (0) 2016.04.05
'TIS_2016/HTML5_1기' Related Articles more
Comments