=================================== 첫번째 페이지 구성 시작 (메인페이지)===================================
// 주의사항 : 팝업 페이지에 jquery 관련 js 파일을 올리면 절대 안됌 !!!!! close 버튼 관련은 내글중 jquery 다이얼로그 참조
<link type="text/css" rel="stylesheet" href="/Content/Tablet/test/jquery-ui.css" /> <!-- 자신에게 맞게 설정 -->
<script type="text/javascript" src="/Content/Tablet/test/jquery-1.11.2.min.js"></script> <!-- 자신에게 맞게 설정 -->
<script type="text/javascript" src="/Content/Tablet/test/jquery-ui.js"></script> <!-- 자신에게 맞게 설정 -->
<script type="text/javascript" src="/Content/Tablet/test/jquery.blockUI.js"></script> <!-- 자신에게 맞게 설정 -->
<script type="text/javascript">
$(document).ready(function () {
});
function OpenAAA() {
var vUrl = "/Test/DialogTContent"; // 호출 페이지 (자신에게 맞게 설정)
var vParams = "LayerID=PopLayer_1"; // 넘겨줄 값 (자신에게 맞게 설정)
PopLayerOpen(vUrl, vParams, 200, 200, "테스트", true, "PopLayer_1")
}
function PopLayerOpen(vUrl, vParams, nHeight, nWidth, sTitle, isScroll, PopLayerID) {
PopLayerID = "#" + PopLayerID;
$(PopLayerID).dialog({
autoOpen: false,
resizable: false,
height: nHeight,
width: nWidth,
title: sTitle,
position: position: { my: "center", at: "center", of: window },
//position: {my: "left+30 top+30", at: "left+30 top+30", of: document}, // 좌측 탑 정렬시
modal: true,
open: function (event, ui) {
$.ajax({
type: "post",
async: false,
url: vUrl,
data: vParams,
beforeSend: function (xmlHttpRequest) {
//로딩바 설정
//$.blockUI();
},
success: function (data, textStatus) {
$(PopLayerID).html(data);
},
error: function (xhr, textStatus, error) {
alert(error);
return false;
},
complete: function (xhr, textStatus) {
//로딩바 해제
}
});
},
close: function (event, ui) {
// 닫힌후 이벤트
$(PopLayerID).html(""); // div html 초기화
}
});
$(PopLayerID).dialog("open"); // 팝업 오픈
if (isScroll) {
$(PopLayerID).css('overflow', ''); // 스크롤 auto
}
else {
$(PopLayerID).css('overflow', 'hidden'); // 스크롤 사용안함
}
return false;
}
// 이미지 원본보기 레이어로 띄우기 Obj=이미지테그, sTitle=사용할타이틀 이름, NewLayerID=팝업을 띄울 Div태크 ID
// width 위드 값을 지정할경우 사이즈 재조정이 안되는 버그 발생... 그래서 별도로 띄워서 이미지 재조정함
function OriginalImageView(Obj, sTitle, NewLayerID) {
if (sTitle == "") {
sTitle = "원본이미지 보기";
}
PopLayerID = "#" + NewLayerID;
var vUrl = "/Test/DialogTImg"; // 호출 페이지 (자신에게 맞게 설정)
var vParams = "imgUrl=" + imgUrl + "&LayerID=" + NewLayerID; // 넘겨줄 값 (자신에게 맞게 설정)
var imgUrl = Obj.src;
$(PopLayerID).dialog({
autoOpen: false,
resizable: false,
height: 'auto',
width: 'auto',
title: sTitle,
position: 'center',
//position: { // 좌측 탑 정렬시
// my: "left+30 top+30",
// at: "left+30 top+30",
// of: document
//},
modal: true,
open: function (event, ui) {
$.ajax({
type: "post",
async: false,
url: vUrl,
data: vParams,
beforeSend: function (xmlHttpRequest) {
//로딩바 설정
},
success: function (data, textStatus) {
$(PopLayerID).html(data);
},
error: function (xhr, textStatus, error) {
alert(error);
return false;
},
complete: function (xhr, textStatus) {
//로딩바 해제
}
});
},
close: function (event, ui) {
// 닫힌후 이벤트
$(PopLayerID).html(""); // div html 초기화
}
});
$(PopLayerID).dialog("open"); // 팝업 오픈
$(PopLayerID).css('overflow', 'hidden'); // 스크롤 사용안함
return false;
}
/// 팝업(다이알로그) 페이지 닫기 ///
function PopLayerClose(PopLayerID) {
PopLayerID = "#" + PopLayerID;
$(PopLayerID).dialog("close");
return false;
}
/// 팝업(다이알로그) 페이지 사이즈 조정 ///
function PopLayerResize(PopLayerID, width, height) {
PopLayerID = "#" + PopLayerID;
$(PopLayerID).width(width);
$(PopLayerID).height(height);
// 페이지 중앙 정렬
$(PopLayerID).dialog("option", "position", { my: "center", at: "center", of: window });
// 페이지 좌측 탑 정렬 30씩 띄울때
//$(PopLayerID).dialog("option", "position", { my: "left+30 top+30", at: "left+30 top+30", of: window });
return false;
}
</script>
<div style="height:1000px; width:700px; background-color:grey;">
<input type="button" value="팝업띄우기" onclick="OpenAAA();"/>
<img src="aaa.jpg" style="cursor:pointer;" onclick="OriginalImageView(this, '이미지 테스트', 'PopImgLayer');" />
<div id="PopLayer_1"></div>
<div id="PopImgLayer"></div>
</div>
=================================== 두번째 페이지 구성 시작 (일반페이지 호출)===================================
@{
string CurLayerID = Request["LayerID"];
}
<script type="text/javascript">
$(document).ready(function () {
});
function ThistPageResize_1(CurLayerID) {
PopLayerResize(CurLayerID, $(".cls_1").width(), $(".cls_1").height())
}
</script>
<div class="cls_1" style="background-color:blue; width:100px; height:100px;">
<input type="button" value="페이지사이즈 조정1" onclick="ThistPageResize_1('@CurLayerID')"/>
<input type="button" value="페이지닫기1" onclick="PopLayerClose('@CurLayerID')"/>
</div>
=================================== 세번째 페이지 구성 시작(원본 이미지보기) ===================================
@{
string imgUrl = Request["imgUrl"];
string CurLayerID = Request["LayerID"];
}
<script type="text/javascript">
$(document).ready(function () {
});
function ThistPageResize_2() {
var CurLayerID = "@CurLayerID";
PopLayerResize(CurLayerID, $("#imgsId").width(), $("#imgsId").height())
}
</script>
<img src="@imgUrl" id="imgsId" onclick="PopLayerClose('@CurLayerID')"/>
</pre>
댓글 없음:
댓글 쓰기