2015년 2월 3일 화요일

jquery 다이얼 로그 중앙정렬, (좌측 및 위)기준 정렬 - 원본이미지보기

=================================== 첫번째 페이지 구성 시작 (메인페이지)===================================
// 주의사항 : 팝업 페이지에 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>


댓글 없음:

댓글 쓰기