웹마스터 팁
모달 윈도우
2014.09.15 18:36
CSS Code
/* UI Object */
html, body{height:100%;margin:0}
.mw{position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%}
.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}
/* //UI Object */
HTML Code
<!--ui object -->
<div id="mw_temp" class="mw">
<div class="bg">
<!--don't put here any content -->
</div>
<div class="fg">
<p>modal windowed layer example. put this layer before end of the body.<button onclick="document.getelementbyid('mw_temp').style.display='none'">close</button>
</p>
</div>
</div>
<!--//ui object -->
Javascript Code
<script type="text/javascript">
/* UI Pattern Script */
/* //UI Pattern Script */
</script>
태그 연관 글
- [2015/11/14] 묻고답하기 게시판에 태그(헤시태그) 작성하는 방법을 알려주세요 *1
- [2014/06/08] 묻고답하기 로고 이미지 업로드 관련 질문드립니다. *1
- [2010/09/01] 묻고답하기 modalWindow-외부페이지에서 생성된 페이지에서는 로그인 안되네요 !!! *2
- [2009/04/28] 묻고답하기 인증메일 문제 다시 질문 드립니다. *2
- [2009/02/24] 묻고답하기 이슈트래커 svn연동 문의 *3