티스토리 뷰
참조 : http://blog.naver.com/iamwinmir/220275795098
첨부파일 : jquery.bpopup.min
레이어팝업이란?
DIV 테그를 이용한 방법으로 사용자가 팝업 수행을 요청하면 DIV 영역을 제외한 부분의 명암이 어두워지면서
팝업이 띄워지는 형태를 말합니다.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
<script src="/js/jquery.bpopup.min.js"></script>
<script type="text/javascript">
function goPopup() {
$("#popup").bPopup(); // 열기
//$("#popup").bPopup().close(); // 닫기
};
</script>
<style type="text/css">
.Pstyle {
opacity : 0;
display : none;
position : relative;
width : auto;
border : 5px solid #fff;
padding : 20px;
background-color : #fff;
}
.b-close {
position : absolute;
right : 5px;
top : 5px;
padding : 0px; /* padding : 5px; */
display : inline-block;
cursor : pointer;
}
</style>
</head>
<body>
<input type="button" value="클릭" onClick="goPopup()">
<div id="popup" class="Pstyle">
<span class="b-close">X</span>
<div class="content" style="height:auto; width:auto;">
레이어 팝업이 완성 되었습니다. <br />팝업에 대한 크기는 content div에서 조정이 가능합니다.
</div>
</div>
</body>
</html>
==========
적용 : 부림홍씨 책보기 메뉴
<script src="/share/js/jquery.bpopup.min.js"></script>
<script type="text/javascript">
function goPopup() {
$("#popup").bPopup();
};
function popupButtonClickHandler(str) {
var strTemp = $("#hiddenStr").val();
if(str=="VIEW") {
//alert("VIEW");
$("#popup").bPopup().close();
viewClickHandler(strTemp);
}
if(str=="TREE") {
//alert("TREE");
treeClickHandler(strTemp);
}
};
function viewClickHandler(str) {
//alert("선택 : "+ str);
//$("#dataId").val(str);
//$( "#dialog" ).dialog( "open" );
//widthTemp = screen.width;
//heightTemp = screen.height;
widthTemp = 800;
heightTemp = 600;
window.open("/html/03/sijoFamily_personData.php?strId="+str, "popup", "width="+widthTemp+", height="+heightTemp+", top=0, left=0, toolbar=no, location=no, status=no, menuber=no, scrollbars=yes, resizable=no");
};
function treeClickHandler(str) {
//alert("선택 : "+ str);
//var strPath = "/html/03/04.php?mode=TREE&munjungIdx=&dataId="+str+"&searchName=&searchBuName=&searchJobuName=&searchSe=&searchTo=#cursorPosition0";
//alert(strPath);
//window.document.location.href(strPath);
document.location.href = "/html/03/04.php?mode=TREE&munjungIdx=&dataId="+str+"&searchName=&searchBuName=&searchJobuName=&searchSe=&searchTo=#cursorPosition0";
};
</script>
<style type="text/css">
.Pstyle {
opacity : 0;
display : none;
position : relative;
width : auto;
border : 5px solid #fff;
padding : 20px;
background-color : #fff;
}
.b-close {
position : absolute;
right : 5px;
top : 5px;
padding : 0px;
display : inline-block;
cursor : pointer;
}
</style>
<div id="popup" class="Pstyle">
<span class="b-close">X</span>
<div class="content" style="height:auto; width:auto;">
<input type="hidden" id="hiddenStr" name="hiddenStr" value="" />
<div style="positon:absolute; font-size:20px; font-weight:bold; color:#333; letter-spacing:3.5px;">● MENU ●</div><br />
<div class="btnBlack" style="cursor:pointer; width:100px; margin-top:5px;" onClick="popupButtonClickHandler(`VIEW`)">상세보기</div><br />
<div class="btnBlack" style="cursor:pointer; width:100px; margin-top:5px;" onClick="popupButtonClickHandler(`TREE`)">계통도</div>
</div>
</div>
'Language > JQuery' 카테고리의 다른 글
| [ JQuery ] DIV POPUP - 팝업 + 오늘그만보기 (0) | 2017.04.06 |
|---|---|
| [ JQuery ] 통계 Chart - JQuery With Google Charts (0) | 2016.01.02 |
| [ JQuery ] DIV display done | none (0) | 2016.01.02 |
| [ JQuery ] JQuery를 이용한 슬라이드 플러그인 - jquery.slides.min.js (0) | 2016.01.02 |
| [ JQuery ] 단축키 사용하기 - ASCII 코드표 포함 (0) | 2016.01.02 |