0. 들어가기
div 태그를 이용해 영역을 미리 만들어 주고 해당 영역의 디폴트 값은 보여주지 않는 상태로 둡니다.
그리고 클릭 등이 일어났을 때 설정했던 영역을 이용해 모달박스를 보여주게 되는 건데요
CSS와 JavaScript, PHP 를 이용해서 간단하게 구현해볼까 합니다.
1. 모달 영역
<div class="modal-back"></div>
<div class="modal-wrap">
<div id="modal-body"></div>
</div>
modal-back 클래스인 div는 모달 박스가 열렸을 때 다른 영역을 검게 칠하거나 해서 강조 해주기 위해 사용되는 영역입니다.
modal-wrap 영역은 모달 박스가 나오는 부분의 영역이고
modal-body 영역은 내용이 나오는 영역입니다.
2. CSS
<head>와 </head> 사이에
<style>
table, tr, td, thead, th{
margin : 1px auto;
border: 1px solid;
border-collapse: collapse;
text-align:center;
}
.modal-wrap{
display: none;
position: fixed;
width: 70%;
height: 300px;
top: 10%;
left: 21%;
background:rgb(88, 88, 88);
z-index: 2;
}
.modal-back{
display: none;
position: fixed;
content: "";
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, 0.7);
top:0;
left: 0;
z-index: 1;
}
</style>
이렇게 집어넣거나
css 파일을 따로 만들고 위 내용을 넣어 준 후
<head>와 </head> 사이에
<link rel="stylesheet" href="/include/style.css>">
요런 식으로 입력해 주세요.
position : fixed 부분은 스크롤에 관계없이 화면에 표시될 수 있도록 위치를 지정해주는 부분이기 때문에 필요에 따라 사용하시면 됩니다.
z-index : 숫자; 부분은 2차원인 모니터에서 앞뒤를 구분하기 위한 부분으로 숫자가 높을수록 위쪽(모니터를 보는 사람 쪽)에 놓이게 됩니다.
3. 간단한 테이블 출력해서 값 넘기기
<table>
<thead>
<th>줄번호</th>
<th>모달</th>
</thead>
<?php
for($i=1; $i<=10; $i++){
echo '<tr>';
echo '<td>'.$i.'번째 줄'.'</td>';
echo '<td>'.'<a href="#" onclick="showModal(\''.$i.'\');return false;">'.'모달열기'.'</a>';
echo '</tr>';
}
?>
</table>
반복문을 이용해 여러줄을 출력했고, 여기서 봐야될 부분은
<a href="#" onclick="showModal(\''.$i.'\');return false;">
이 부분입니다.
간단히 설명하면 이 링크를 클릭했을 때 해당 페이지내에서 showModal이라는 함수를 찾아서 $i 값을 넘기고 실행해라 정도가 되겠네요.
4. JavaScript
우선 <head></head> 사이에
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
를 입력해 준 후
<script>
function showModal(num){
var html = '';
html += '<table>';
html += '<td>' + '<input type="text" value="' + num + '">' + '</td>';
html += '<td>' + '복사' + '</td>';
html += '</tr>';
html += '</table>';
html += '<div style="width:100%;text-align:right;">' + '<a href="#" onclick="modalClose();return false;">닫기</a></div>';
$('#modal-body').html(html);
document.querySelector('.modal-wrap').style.display = 'block';
document.querySelector('.modal-back').style.display = 'block';
}
function closeModal(){
document.querySelector('.modal-wrap').style.display = 'none';
document.querySelector('.modal-back').style.display = 'none';
}
</script>
위 내용도 추가해 주세요.
showModal()의 주 내용은
html 변수에다가 표시 될 내용을 입력했다가 modal-body 에 뿌려준 후
document.querySelector 를 이용해 모달박스와 배경을 활성화 시켜주는 것입니다.
closeModal()은 걍 다시 안 보이게 해 주는 함수입니다.
전문
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table, tr, td, thead, th{
margin : 1px auto;
border: 1px solid;
border-collapse: collapse;
text-align:center;
}
.modal-wrap{
display: none;
position: fixed;
width: 70%;
height: 300px;
top: 10%;
left: 21%;
background:rgb(88, 88, 88);
z-index: 2;
}
.modal-back{
display: none;
position: fixed;
content: "";
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, 0.7);
top:0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="modal-back"></div>
<div class="modal-wrap">
<div id="modal-body"></div>
</div>
<table>
<thead>
<th>줄번호</th>
<th>모달</th>
</thead>
<?php
for($i=1; $i<=10; $i++){
echo '<tr>';
echo '<td>'.$i.'번째 줄'.'</td>';
echo '<td>'.'<a href="#" onclick="showModal(\''.$i.'\');return false;">'.'모달열기'.'</a>'.'</td>';
echo '</tr>';
}
?>
</table>
<script>
function showModal(num){
var html = '<table>';
html += '<tr>';
html += '<td>' + '<input type="text" value="' + num + '">' + '</td>';
html += '<td>' + '복사' + '</td>';
html += '</tr>';
html += '</table>';
html += '<div style="width:100%;text-align:right;"><a href="#" onclick="closeModal();return false;">닫기</a></div>';
$('#modal-body').html(html);
document.querySelector('.modal-wrap').style.display = 'block';
document.querySelector('.modal-back').style.display = 'block';
}
function closeModal(){
document.querySelector('.modal-wrap').style.display = 'none';
document.querySelector('.modal-back').style.display = 'none';
}
</script>
</body>
</html>
'Programming > Javascript & jQuery' 카테고리의 다른 글
| [jQuery] AJAX 기본 사용법 (0) | 2022.07.06 |
|---|---|
| [JavaScript/jQuery] 02. 문자열 다루기-1(합치기, 자르기, 나누기) (0) | 2022.06.29 |
| [JavaScript/jQuery] 01. 반복문 (0) | 2022.06.29 |
| [JavaScript/jQuery] 00. 자바스크립트 기본 사용법 (0) | 2022.06.27 |
| [JavaScript]자바스크립트 기본 사용 법 (0) | 2018.12.27 |