[ax5ui-modal] div[data-modal-els="body-frame"] 추가로 인한 사이트 이펙트

[hyunjun19]

<div data-modal-els="body-frame" style="position: absolute;left:0;top:0;width:100%;height:100%;"></div> 위 div가 추가되면서 기존에 구현된 컨텐츠가 해당 div에 가려져서 클릭이 안되는 이슈가 발생하고 있습니다. div[data-modal-els="body-frame"]는 왜 추가된건가요?

<div id="ax5-modal-38" data-modal-els="root" class="ax5modal default " style="width: 300px; height: 215px; left: 37.5px; top: 226px;">
            <div class="ax-modal-body" data-modal-els="body">
                <div data-modal-els="body-frame" style="position: absolute;left:0;top:0;width:100%;height:100%;"></div>
            <div class="side-gap modal-gajago-share"><div class="DH20"></div><h4 class="text-left"><i class="icon-gajago-share text-danger"></i>&nbsp; 공유하기</h4><div class="DH20"></div><a class="btn gajago-share " id="btn-share-kakao"><img alt="" src="https://s3.ap-northeast-2.amazonaws.com/production-gajago-static/images/ico-like-kakao.png"><div>카카오톡</div></a><a class="btn gajago-share" data-share-type="facebook"><img alt="" src="https://s3.ap-northeast-2.amazonaws.com/production-gajago-static/images/ico-like-facebook.png"><div>페이스북</div></a><a class="btn gajago-share " data-share-type="sms"><img alt="" src="https://s3.ap-northeast-2.amazonaws.com/production-gajago-static/images/ico-like-sms.png"><div>SMS문자</div></a><div class="DH10"></div><div class="cx-row no-padding"><div class="cx-col-9"><input id="shareLink" type="input" class="form-control lg WP100" value="https://www.thegajago.com/deals/19763"></div><button type="button" data-clipboard-target="#shareLink" class="cx-col-3 btn btn-copyurl">URL복사</button></div></div><a style="position:absolute; top:15px; right:16px;" data-btn-control="cancel"><i class="icon-gajago-close"></i></a></div>
            <div data-ax5modal-resizer="top"></div>
            <div data-ax5modal-resizer="right"></div>
            <div data-ax5modal-resizer="bottom"></div>
            <div data-ax5modal-resizer="left"></div>
            <div data-ax5modal-resizer="top-left"></div>
            <div data-ax5modal-resizer="top-right"></div>
            <div data-ax5modal-resizer="bottom-left"></div>
            <div data-ax5modal-resizer="bottom-right"></div>
        </div>

[thomasJang]

아래 링크를 누르시면 다음의 코드를 찾을 수 있습니다. http://ax5.io/ax5ui-modal/demo/index.html

        $('#modal-open').click(function () {
            modal.open({}, function () {
                // check your browser console
                console.log(this);

                var btn = jQuery(
                    '<button class="btn btn-default" type="button" style="margin-top: 100px;">' +
                    'Modal Close</button>');
                btn.click(function () {
                    modal.close();
                });
                this.$["body-frame"].append(btn);

            });
        });

기존에 this.$.body.append 를 하도록 가이드 했지만 지금은 this.$["body-frame"].append 해야 정상작동합니다.

[hyunjun19]

@thomasJang 감사합니다.