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

웹개발자의 기지개

[css] ccs 만으로 만드는 간단한 모달창 띄우기 본문

웹퍼블리싱/CSS

[css] ccs 만으로 만드는 간단한 모달창 띄우기

http://portfolio.wonpaper.net 2020. 5. 17. 05:22
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
<html>
<head>
<title>모달창 예제화면</title>
<style type="text/css">
 
html,body {height:100%,margin:0}
.mw {position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%;display:none;}
.mw .bg {position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;filter:alpha(opacity=50)}
.mw .fg {position:absolute;top:50%;left:50%;width:360px;height:160px;margin:-100px 0 0 -200px;padding:20px;border:3px solid #ccc;background:#fff;}
 
</style>
</head>
<body>
<p><button type="button" onClick="document.getElementById('mw_temp').style.display='block'">Open</button></p>
 
 
<div id="mw_temp" class="mw">
    <div class="bg"><!--이란에는 내용을 넣지 마십시오.--></div>
    <div class="fg">
        <p>모달창 예제입니다.body 태그앞에 넣으십시오.<button onclick="document.getElementById('mw_temp').style.display='none'" type="button">창닫기</button></p>
    </div>
</div>
 
</body>
</html>
 cs

 

'웹퍼블리싱 > CSS' 카테고리의 다른 글

[CSS] 말줄임표 적용하기  (0) 2020.07.18
[CSS] 배경이미지 프린트할 때 나오게 하는 방법  (0) 2020.07.15
[css] 반응형웹상의 이미지 크기 자동지정 (꽉채우기)  (0) 2020.05.15
[css] 이미지에 그림자 넣기 - box-shadow 속성  (1) 2020.03.15
CSS 그라데이션 배경색 넣기  (0) 2020.01.31
'웹퍼블리싱/CSS' Related Articles more
Comments