Programming language/Javascript,jQuery

[Javascript]div modal창 만들기

오늘은 시간이 조금 남아서 부트스트랩의 모달이 아닌 div로 모달창을 만들어봤다. 매우 간단하게!

먼저 <script>로 쓰인 코드

마우스 오버 시에 아래 이벤트가 발생하게 되고 div의 id를 가지고 숨겨진 div를 display시켜준다.

+ 추가로 display되는 div안에 이미지 및 텍스트를 넣을 수 있다.

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
function mousehover(e){
  var background = document.getElementById("background");
  var popup = document.getElementById("popup");
  var emp_nm = document.getElementById(e.getAttribute('id')).getAttribute('id');
  var emp_img = document.createElement("img"); 
 
  emp_img.id = "kakao"; 
  emp_img.src = "/sample/test/"+emp_nm+".jpg";
  emp_img.style.width = "200px";
  emp_img.style.height = "250px"; 
 
  document.getElementById('EMP_IMG').appendChild(emp_img); 
  background.style.filter = "alpha(Opacity=50)";
  background.style.display = '';
  popup.style.display = '';
  document.getElementById("EMP_NM").innerHTML = emp_nm;    
  //alert("test : " +document.getElementById(e.getAttribute('id')).getAttribute('id'));
}
 
function modalclose(){
  document.getElementById("popup").style.display = 'none';
  document.getElementById("background").style.display = 'none';
  document.getElementById("EMP_NM").innerHTML = '';
  document.getElementById("EMP_IMG").innerHTML = '';
}
 
 
Colored by Color Scripter
cs

<css>에 쓰인 코드

div 태그 영역을 투명하게 만들어 그 위에 또 div를 입혔다.

화면을 꽉 채우려고 최소 높이를 100%로 설정했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css"> 
.container {
  background-color: gray;
  background: rgba(0,0,0,0.4); 
  position: absolute;
  width: 100%;
  min-height: 100%;
  left: 0;
  top: 0;
  text-align:center;
}
.content {
  border: 2px solid white;
  border-radius: 25px;
  background-color: #ffffff; 
  position:absolute;
  top:50%;
  left:50%;
  width: 60%;
  height: 450px;
  transform:translate(-50%, -50%)
}
</style>
cs

<body> 태그 안에 사용된 코드

body태그 안에는 테이블이 하나 있는데 그 위로 마우스 오버시 div창이 출력되도록 하였다.

그리고 숨겨져 있는 모달창 div

이미지ⓧ 버튼을 클릭하면 div는 다시 사라진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container" id="background" style="display: none;">
  <div class="content" id="popup" style="display: none;">
    <div style="height: 20%; text-align: center;">    
       <span id="EMP_NM" style="font-size: 15px; font-weight: bold; padding-top: 10px;" ></span>
       <span style="float: right;">
         <img src='/sample/test/cancel.png' style="cursor: pointer;" onclick="modalclose()">            
       </span>
    </div>
    <div id="EMP_IMG" style="border: 1px solid black; height: 60%;">
    </div>
    <div style="height: 20%;"> 하단 </div>
   </div>
 </div>
 
 
 
...(생략)
 
 
 
 <td class="td_content_c" id="td_c">
    <span id="ryan" style="cursor: pointer;" onmouseover="mousehover(this)">김라이언</span>    
 </td>     
Colored by Color Scripter
 cs

<결과>

+피드백은 언제나 환영입니다 :)

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

'Programming language > Javascript,jQuery' 카테고리의 다른 글

[Javascript]이미지 크기 구하기 (4)	2018.08.31
DOM(Document Object Model) (0)	2018.08.21
[Javascript]id값 가져오기 (0)	2018.06.25
[Javascript]document.getElementById() - (2) (0)	2018.06.22
[Javascript]document.getElementById() - (1) (0)	2018.06.21

Contents

새소식

[Javascript]div modal창 만들기

'Programming language > Javascript,jQuery' 카테고리의 다른 글

연관 포스팅

티스토리툴바