안녕하세요. IT 이곳저곳을 여행하고 있는 IT여행자입니다.
이번 포스팅은 CSS와 JavaScript만을 사용하여 모달 박스를 만들어 암호를 입력하도록 해 보겠습니다. iframe이나 새창을 띄워서 모달 형태의 박스를 구현하는 방법도 있지만 쓰임새에 따라 각각의 장단점들이 있겠습니다.
여기서 모달 박스란 반드시 어떤 작업을 해야 하거나, 승인 또는 거부를 한 후 다음 작업이 진행되도록 하기 위해 사용될 것입니다.
[시연 장면]
1. HTML 작업
먼저 모달이 필요한 페이지와 모달을 구현할 페이지를 작성합니다.
<body>
<label>암호를 입력하려면 버튼을 클릭해 주세요.</label>
<input type='button' value='open' id='btnOpen'>
<div id='modal'>
<div id='content'>
<input type='button' value='X' class="close" id='btnClose'/>
<label>암호를 입력하세요</label><br/>
<input type='password' id='pwd' value='1234' />
<input type='button' value='check' id='btnCheck' />
</div>
</div>
CSS를 구현하기 이전이기 때문에 아마도 아래와 같은 화면이 출력될 것입니다.
여기서 id='modal'로 되어 있는 부분이 모달 창이 될 것입니다.
2. modal 영역의 CSS
바탕색에 투명도를 주고 modal 영역이 브라우저 전체를 차지할 수 있도록 CSS를 지정합니다.
<style>
#modal{
z-index : 1;
background-color: rgba(0,0,0,.3);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
...
</style>
아래와 같이 modal 영역이 반투명하게 되지만 바탕에 있는 내용과 겹쳐져 표시될 것입니다.
3. content 영역의 CSS
바탕에 있어야 하는 내용과 modal 창에 있는 내용이 겹쳐있는데 이는 신경 쓰지 말고 modal 영역에 있는 content를 화면 중앙쯤에 갖다 놓도록 하겠습니다. position을 relative로 지정한 이유는 'X' 버튼의 위치를 우측 상단으로 용이하게 배치하기 위해서입니다.
<style>
...
#modal>#content{
width:300px;
margin:100px auto;
padding:20px;
position: relative;
background-color:#fff;
}
</style>
쬐금 멋져졌습니다. ^^
4. 종료 버튼을 content 영역 오른쪽 상단으로 배치
종료 버튼을 content 영역의 오른쪽 상단으로 배치하고 외곽선과 배경색을 content 영역의 바탕색과 동일하게 주어 'X'자만 보이게 CSS를 지정합니다. 또한 버튼에 마우스가 올려지면 마우스 포인터를 바꾸어 주도록 하겠습니다.
<style>
...
#modal .close{
position:absolute;
top:4px;
right:4px;
font-size:20px;
border:0;
background-color: #fff;
}
#modal .close:hover,
#modal .close:focus {
color : #000;
text-decoration: none;
cursor :pointer;
}
</style>
완성된 레이아웃입니다.
완성된 코드를 실행해 보면 바탕에 있는 'open' 버튼이나 문자들은 선택되지 않습니다. 'X' 버튼을 클릭하거나 'check' 버튼을 클릭하여 modal 창을 닫는 후에 나 선택될 것입니다.
5. 각 버튼에 이벤트 처리
마지막으로 각 버튼에 대한 이벤트를 처리하도록 하겠습니다.
<script>
var btnOpen = document.getElementById('btnOpen');
var btnCheck = document.getElementById('btnCheck');
var btnClose = document.getElementById('btnClose');
// modal 창을 감춤
var closeRtn = function(){
var modal = document.getElementById('modal');
modal.style.display = 'none';
}
// modal 창을 보여줌
btnOpen.onclick = function(){
var modal = document.getElementById('modal');
modal.style.display = 'block';
}
btnCheck.onclick = closeRtn;
btnClose.onclick = closeRtn;
</script>
처음부터 modal 창이 보이면 안 되기 때문에 modal 영역을 감추어 주는 CSS를 추가하면서 본 포스팅을 마무리하도록 하겠습니다.
<style>
#modal{
display : none;
...
}
...
</style>
이상 IT 이곳저곳을 여행하고 있는 IT여행자였습니다.
[전체 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>password input modal</title>
<style>
#modal{
display : none;
z-index : 1;
background-color: rgba(0,0,0,.3);
position:fixed;
left:0;
top: 0;
width:100%;
height:100%;
}
#modal>#content{
width:300px;
margin:100px auto;
padding:20px;
position: relative;
background-color:#fff;
}
#modal .close{
position:absolute;
top:4px;
right:4px;
font-size:20px;
border:0;
background-color: #fff;
}
#modal .close:hover,
#modal .close:focus {
color : #000;
text-decoration: none;
cursor :pointer;
}
</style>
</head>
<body>
<label>암호를 입력하려면 버튼을 클릭해 주세요.</label>
<input type='button' value='open' id='btnOpen'>
<div id='modal'>
<div id='content'>
<input type='button' value='X' class="close" id='btnClose'/>
<label>암호를 입력하세요</label><br/>
<input type='password' id='pwd' value='1234' />
<input type='button' value='check' id='btnCheck' />
</div>
</div>
<script>
var btnOpen = document.getElementById('btnOpen');
var btnCheck = document.getElementById('btnCheck');
var btnClose = document.getElementById('btnClose');
// modal 창을 감춤
var closeRtn = function(){
var modal = document.getElementById('modal');
modal.style.display = 'none';
}
// modal 창을 보여줌
btnOpen.onclick = function(){
var modal = document.getElementById('modal');
modal.style.display = 'block';
}
btnCheck.onclick = closeRtn;
btnClose.onclick = closeRtn;
</script>
</body>
</html>
'작은 모듈(IT구슬)' 카테고리의 다른 글
| USB나 이동 디스크에 MySQL Server 설치하기 (0) | 2021.05.26 |
|---|---|
| JavaScript을 사용한 multiple 속성 이미지 미리보기 (12) | 2021.01.10 |
| 이클립스 코드 자동 완성기능 (0) | 2020.12.28 |
| 다음 API를 사용한 우편번호 검색 (0) | 2020.11.01 |
| 선택한 것만 미리보기 하면서 멀티 파일 전송하기 (0) | 2020.06.03 |
