Remodal

by hohoya33

HTML

https://codepen.io/joshuamasen/pen/OYaYbL
https://medium.com/samsung-internet-dev/enhancing-multi-pane-single-page-web-apps-with-intersection-observer-5929e2c0c6b



아이폰X 안전영역(Safe Area) 대응 사례 공유

https://medium.com/@keen0927/iphone-x-%EC%9B%B9%EB%B7%B0-sare-area-inset-%EA%B4%80%EB%A0%A8-61cafd7ce8c6
https://medium.com/@punkyoon/iphone-x%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9B%B9%EB%B7%B0-%EC%84%A4%EC%A0%95-e236325b7c26
https://wit.nts-corp.com/2019/10/24/5731

<div class="menu-mask"></div>



<div class="flyout-shadow-overlay" style="height: 100vh;">
<div class="flyout-results-container hover" style="height: 100vh;">




</div>
</div>














<div class="remodal-overlay remodal-is-opened is-edr" style="display: block;"></div>

<div class="remodal-wrapper remodal-is-opened" style="display: block;">
<div class="rue-modal remodal remodal-is-initialized remodal-is-opened is-international" tabindex="-1" id="edr_modal">



<div id="edr_register" style="display: block;">
    <div id="edr_register_form"><div><div id="registration_step"><div><h1>Up to 70% o</h1>


<form class="rue-form" novalidate="">
    <ul class="form-errors"></ul>

    <div class="rue-field">
        <input id="landing_email" type="email" aria-required="true" name="username">
        <label for="landing_email">Email Address</label>
    </div>


    <button id="registration_continue" type="submit">Continue</button>
</form>
</div></div>
</div></div>
    

</div>






</div>
</div>














<div class="some-container">
  <p class="some-title">Title</p>
  <ul class="list">
    <li>
      <div class="ico"></div>
      <div class="title">item title</div>
    </li>
    <li>
      <div class="ico"></div>
      <div class="title">item title</div>
    </li>
    <li>
      <div class="ico"></div>
      <div class="title">item title</div>
    </li>
    <li>
      <div class="ico"></div>
      <div class="title">item title</div>
    </li>
    <li>
      <div class="ico"></div>
      <div class="title">item...

CSS

.wrap-buy-detail{position:fixed;bottom:0;left:0;z-index:999}
@media only screen and (min-width:375px) and (max-width:415px) and (min-height:722px) and (max-height:897px){ /* IphoneX & max */
	.wrap-buy-detail.agentIOS,
	.wrap-raffle .wrap-float-bottom .agentIOS,
	.wrap-layer.layer-basic.select-purchase-Layer.agentIOS{
	  padding-bottom:34px;background-color:#000
    }
	.select-purchase-Layer .option-list.agentIOS{margin-bottom:34px}
	.bottom-quick-btn.agentIOS{margin-bottom: 34px;}
	.wrap-buy-detail.agentIOS.fixed{padding-bottom:0}
}

/* IphoneX & max 노차 */
.mgz-floating { min-width: 320px; height: 50px; padding: 10px 15px; background-color: #ffffff; box-sizing: border-box; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; height: calc(constant(safe-area-inset-bottom) + 50px); height: calc(env(safe-area-inset-bottom) + 50px); padding-bottom: calc(constant(safe-area-inset-bottom) + 10px); padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }




.musinsa-footer {
    font-size: 14px;
    line-height: 1.5;
    background-color: #000000;
    border-top: 10px solid #f1f1f1;
    text-align: center;
    padding: 36px 0 60px 0;
}





body.fixedScroll { position: fixed; left: 0; right: 0; overflow: hidden; }


.fixedScroll .ui-layer-close.fixed { -webkit-animation: fadeIn 0.2s both 0.2s; -moz-animation: fadeIn 0.2s both 0.2s; -o-animation: fadeIn 0.2s both 0.2s; animation: fadeIn 0.2s both 0.2s; }

.ui-layer.layer-full { display: none; top: 100%; min-height: 100%; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.ui-layer.layer-full.is-active { display: block; -webkit-animation: slideUp 0.2s both; -moz-animation: slideUp 0.2s both; -o-animation: slideUp 0.2s both; animation: slideUp 0.2s both; }




html.modal-open,
html.modal-open body {
    height: 100%;
    overflow: hidden
}




html.remodal-is-locked {
    overflow: hidden;
    touch-action: none
}

.remodal-overlay {
    position: fixed;
    z-index: 9999;
    top:...

JavaScript

goHistoryBack: function() {
                        if (mt.isAPP)
                            t(JSON.stringify({
                                function: "ui",
                                action: "appHistoryback"
                            }), (function() {
                                history.back()
                            }
                            ));
                        else
                            try {
                                window.opener || 0 !== document.referrer.length ? history.back() : window.close()
                            } catch (e) {
                                history.back()
                            }
                    },




function showPopup(type){
	if(type == "new") {
		document.body.addEventListener("touchmove", preventDefault, {passive: false});
	} else {
		pscTop = $(window).scrollTop();
		$('body').addClass('fixedScroll').css('top', -pscTop + 'px');
	}
}
function closePopup(type){
	if(type == "new") {
		document.body.removeEventListener("touchmove", preventDefault, { passive: false });
	} else {
		$(window).scrollTop();
		$('body').removeClass('fixedScroll').css('top','');
	}
}    
    
    
    $('.menu-toggle').off('click touch').on('click touch', function(e) {
                e.preventDefault();
                $('#wrapper').toggleClass('menu-active');
                $('#wrapper.menu-active').css({
                    'height': windowHeight
                });
                if ($('#wrapper').hasClass('menu-active')) {
                    $('.menu-mask').off('click touch').on('click touch', function(e) {
                        $('.menu-toggle').trigger('click');
                    });
                    $('.menu-toggle').attr('aria-expanded', true);
                    $('#navigation').attr('aria-hidden', false);
                    $('body').css({
                        'overflow': 'hidden'
                    });
                    var fadeins = new Array();
                    var...