그것도 메인 페이지에서 뜨는 "광고" 혹은 "공지" 팝업창.
마구잡이로 뜨는 팝업창이 미관상 보기 않좋기도 하고, 보안상 문제가 되기도 해서, 이제는 거의 모든 웹브라우져들이 자동으로 뜨는 팝업창 자체를 아에 안띄우게 만들어 버렸지만, 끝없는 클라이언트의 요구로 이제는 팝업창이 아니라 팝업 레이어를 띄우게 되어 버렸다.
팝업 킬러 같은 것으로 어느정도 차단이 가능했던 팝업창 시절에 비하면, 아예 뜨는걸 막는게 불가능한 팝업레이어는 오히려 더 상황이 악화된게 아닌가 하는 생각도 든다... ^^;
하여간, 요즘은 onLoad 시 window.open() 으로 여는 팝업창이 기본적으로 필터링 되어 열리지 않으므로 어쩔수 없이 레이어를 써서 팝업창을 구현하는데, 어차피 어려운 기능은 아니긴하나, jQuery 를 이용하면 훨씬 간단히 구현 할 수 있다.
단, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 으로 doctype 이 지정되어 있을경우 안먹히는 경우도 있으니 주의...
참고 : http://api.jqueryui.com/dialog/
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="dialog" style="width:80%" title="Dialog Title">
<div style="width:100%">
<font color="red"><b>
팝업창 내용
</b></font>
</div>
</div>
<script>
$( "#dialog" ).dialog({
autoOpen:true, //자동으로 열리지않게
width:450,
height:180,
modal:false, //모달대화상자
resizable:false, //크기 조절 못하게
show : 'slide', hide : 'slide',
position : [500, 500],
buttons:{
"확인":function(){
$(this).dialog("close");
}
}
});
</script>
