Skip to content

Commit

Permalink
모바일 팝업레이어 기기에 맞제 재조정 스크립트 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
chicpro committed Mar 12, 2020
1 parent 2258683 commit a702ec8
Showing 1 changed file with 85 additions and 0 deletions.
85 changes: 85 additions & 0 deletions mobile/newwin.inc.php
View file
Expand Up @@ -35,7 +35,63 @@
</div>

<script>
function popupLayerResize(device_width) {
$(".hd_pops").each(function(i) {
var $el = $(this);
var elWidth = $el.width();

var width = elWidth + parseInt($el.css("left"));

if (width > device_width) {
var left;

if(elWidth > device_width)
left = 0;
else
left = parseInt((width - device_width) / 2);

if (left < 0)
left = 0;

$el.find("img").each(function(idx) {
var $img = $(this);

if ($img.width() > elWidth) {
$img.css("width", "100%").css("height", "");
}
});

if (elWidth > device_width) {
$el.css("width", "100%");
$el.find(".hd_pops_con").css("width", "100%").css("height", "");
}

$el.css("left", left);
}
});
}

$(function() {
var device_width = $(window).width();

$(".hd_pops").each(function(i) {
var $el = $(this);

if($el.data("left") == undefined) {
$el.data("left", $el.css("left"));

$el.find(".hd_pops_con").each(function(k) {
var $t = $(this);

if ($t.css("width") != undefined)
$t.data("width", $t.css("width"));

if ($t.css("height") != undefined)
$t.data("height", $t.css("height"));
});
}
});

$(".hd_pops_reject").click(function() {
var id = $(this).attr('class').split(' ');
var ck_name = id[1];
Expand All @@ -47,6 +103,35 @@
var idb = $(this).attr('class').split(' ');
$('#'+idb[1]).css('display','none');
});

// 레이어 width 기기에 맞게 재조정
popupLayerResize(device_width);

$( window ).resize(function() {
$(".hd_pops").each(function(i) {
var $el = $(this);

$el.css("width", "");

if ($el.data("left") != undefined) {
$el.css("left", $el.data("left"));

$el.find(".hd_pops_con").each(function(j) {
var $t = $(this);

if ($t.data("width") != undefined)
$t.css("width", $t.data("width"));

if ($t.data("height") != undefined)
$t.css("height", $t.data("height"));
});
}
});

device_width = $(window).width();
popupLayerResize(device_width);
});

});
</script>
<!-- } 팝업레이어 끝 -->

7 comments on commit a702ec8

@JRevirthuum
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 편리님 멋져요!

@chicpro
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

감사합니다. 오랜 만에 뵙는 것 같네요. ㅎㅎㅎ

@angelbro
Copy link

@angelbro angelbro commented on a702ec8 Jul 12, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하십니까~
편리님 팀을 적용하고 잘 사용하다 이상한 점이 있어 확인차 문의드립니다.
디바이스 width 값에 따라 left 값이 변하는데 top 값은 이리저리 만져도 변하질 않네요.

var left;
var top;       
    
if(elWidth > device_width) {
    left = 0;
    top = 0;
} else {
    left = parseInt((width - device_width) / 2);
    top = 100;
}
if (left < 0)
    left = 0;
...
$el.css("left", left).css("top", top);

처럼 변경해보았는데
left 값은 디바이스 리사이즈에 따라 변경이 되는데 top값은 변경이 되질 않네요.

if ($el.data("left") != undefined) {
부분처럼 top을 지정해주어도 변화가 없는데 어찌된 영문인지 모르겠습니다.
제가 놓치는 부분이 어느 부분인가요?

@chicpro
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요.
코드 전체를 본 것이 아니기 때문에 원인을 알 수는 없을 것 같습니다.
console.log(top); 와 같이 테스트 코드를 top 계산하는 코드 부분에 추가하여 값이 콘솔에 제대로 표시되는지 우선 확인해 보셔야할 것으로 생각됩니다.

@angelbro
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

답변 감사합니다. console 대신 alert로 if문에 맞춰 찍어봤는데 제가 생각했던 것과 다르게 결과가 나옵니다.
현 소스에서 left의 경우 width에 따라 디바이스가 줄면 left 값이 0 또는 parseInt((width - device_width) / 2)로 변경되고
디바이스가 늘어나면 다시 원래의 left값으로 돌아오는데
top은 같은 식으로 설정했을 때 0으로 변경되었다가 디바이스가 늘어날 경우 원값으로 돌아오지 않더라구요.

아래는 원소스의 펑션에 제가 추가한 부분입니다.

function popupLayerResize(device_width) {

    $(".hd_pops").each(function(i) {
        var $el = $(this);
        var elWidth = $el.width();
        var elTop = parseInt($el.css("top"));
        var width = elWidth + parseInt($el.css("left"));
        
        if (width > device_width) {
            var left;
            var top;

            if(elWidth > device_width) {
                left = 0;
                top = 0;
            } else {
                left = 0; // Origin left = parseInt((width - device_width) / 2);
                top = elTop;
            }
            if (left < 0) {
                left = 0;
            }
            $el.find("img").each(function(idx) {
                var $img = $(this);

                if ($img.width() > elWidth) {
                    $img.css("width", "100%").css("height", "");
                }
            });
            if (elWidth > device_width) {
                $el.css("width", "100%");
                $el.find(".hd_pops_con").css("width", "100%").css("height", "");
            }
            $el.css("left", left).css("top", top);
        }
    });
}

@chicpro
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

원래 top 값을 저장해두는 부분이 있는지요?

        if($el.data("left") == undefined) {
            $el.data("left", $el.css("left"));

위 코드가 원래 left 값을 저장했다가 사이즈 변경 때 가져와서 left 값을 적용시켜 줍니다.

            if ($el.data("left") != undefined) {
                $el.css("left", $el.data("left"));

@angelbro
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아~ 제가 잘못 이해하고 있었습니다. :)
리사이즈 하기 전에 top 값을 지정하면서
$( window ).resize(function() {
밖에만 신경썼지 안에도 넣어야 한다는 생각을 못했네요.
도움 감사합니다.

Please sign in to comment.