<th><a href="#" onfocus=blur() onClick="window.open('Stats.php','','width=1600, height=680,top=200,left=50,location=no, directories=no,resizable=no,status=no,toolbar=no,menubar=no,titlebar=no,scrollbars=no, resizable=no,copyhistory=no');return false;">일별통계</a></th>
location=no 를 설정해도 보안 문제 때문에 무조건 보이게 한단다.
그래서 윈도우 창을 새로 띄운 경우에는 URL 정보가 노출된다.
jQuery popup 하는 걸 테스트해보면
<div></div> 가 있는 상태에서 화면에 보이지 않게 하다가 새로운 창으로 정보를 보이게 해주는 역할이다.
그러다보니 기존 파일의 jQuery 정보와의 충돌문제가 있을 수도 있어서 원하지 않은 결과가 나오기도 한다.
팝업창 띄우는 걸 검색해서 하나 찾았다.
http://inspirationalpixels.com/tutorials/custom-popup-modal
이것만으로 쉽게 해결될 수도 있지만 해결이 잘 안될때가 있다.
그걸 극복하기 위해서 편법을 구상했다. 바로 <iframe> 이다.
iframe 에 대한 사항은 http://www.homejjang.com/05/iframe.php 을 참조하면 도움된다.
아래 코드와 같이 하면 해결된다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="popup_layer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 팝업 OPEN
$('#popup-open-1').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
// 팝업 CLOSE
$('#popup-colse-1').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
</script>
</head>
<body>
<a href="#" id="popup-open-1" class="btn" data-popup-open="popup-1">Open Popup #1</a>
<div class="popup" data-popup="popup-1">
<div class="popup-inner">
<iframe src="http://www.daum.net" frameborder="0" width="1200" height="500" marginwidth="0" marginheight="0"></iframe>
<a href="#" id="popup-colse-1" class="popup-close" data-popup-close="popup-1">x</a>
</div>
</div>
</body>
</html>
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| [javascript] 자바스크립 데이터 타입 및 다시 보는 기초 (0) | 2017.01.15 |
|---|---|
| [jQuery] dynamic input box 추가 using jQuery (0) | 2017.01.07 |
| [jQuery] jqplot 를 이용한 막대 그래프 통계 (MySQL DB 실제 연동) (0) | 2016.12.31 |
| [jQuery] Converting JSON Object into Javascript array (0) | 2016.12.31 |
| [jQuery] How to enable or disable my Internet browser's Autocomplete (0) | 2016.12.31 |
Link2Me