Rename openFullscreenIframe() to openModalIframe() and handle the back button properly

common/js/common.js

@@ -236,7 +236,7 @@
 							/* if(icon) styleText = " style=\"background-image:url('"+icon+"')\" "; */
 							if (target === 'popup') {
 								if (isMobile) {
-									click_str = 'onclick="openFullScreenIframe(this.href, \''+target+'\'); return false;"';
+									click_str = 'onclick="openModalIframe(this.href, \''+target+'\'); return false;"';
 								} else {
 									click_str = 'onclick="popopen(this.href, \''+target+'\'); return false;"';
 								}
@@ -543,6 +543,23 @@ jQuery(function($) {
 
 })(jQuery);
 
+/**
+ * Main handler for popstate events
+ */
+window.addEventListener('popstate', function(event) {
+	// Close modal if it is open
+	if ($(document.body).hasClass('rx_modal_open')) {
+		const body = $(document.body).removeClass('rx_modal_open');
+		const scroll_position = body.data('rx_scroll_position');
+		if (scroll_position) {
+			$(window).scrollLeft(scroll_position.left);
+			$(window).scrollTop(scroll_position.top);
+			body.removeData('rx_scroll_position');
+		}
+		$('.rx_modal').remove();
+	}
+});
+
 /**
  * @brief xSleep(micro time)
  **/
@@ -705,11 +722,12 @@ function zbxe_folder_close(id) {
 /**
  * 팝업창 대신 전체 화면 iframe을 띄우는 함수
  */
-function openFullScreenIframe(url, target) {
+function openModalIframe(url, target) {
 	const iframe = document.createElement('iframe');
 	const iframe_sequence = String(Date.now()) + Math.round(Math.random() * 1000000);
-	iframe.setAttribute('id', '_rx_iframe_' + iframe_sequence);
+	const iframe_id = '_rx_iframe_' + iframe_sequence;
-	iframe.setAttribute('class', 'rx_fullscreen_iframe');
+	iframe.setAttribute('id', iframe_id);
+	iframe.setAttribute('class', 'rx_modal');
 	iframe.setAttribute('name', target || ('_rx_iframe_' + iframe_sequence))
 	iframe.setAttribute('src', url + '&iframe_sequence=' + iframe_sequence);
 	iframe.setAttribute('width', '100%');
@@ -719,24 +737,26 @@ function openFullScreenIframe(url, target) {
 	iframe.setAttribute('style', 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:999999999; background-color: #fff; overflow-y:auto');
 
 	const body = $(document.body);
+	if (!body.data('rx_scroll_position')) {
 		body.data('rx_scroll_position', {
 			left: $(window).scrollLeft(),
 			top: $(window).scrollTop()
 		});
+	}
 	body.addClass('rx_modal_open');
 	body.append(iframe);
+	history.pushState({ modal: iframe_id }, '', location.href);
 }
 
-function closeFullScreenIframe() {
+function closeModal(id) {
-	$('.rx_fullscreen_iframe').remove();
+	history.back();
-	const body = $(document.body);
+	/*
-	body.removeClass('rx_modal_open');
+	if (typeof id === 'string') {
-	const scroll_position = body.data('rx_scroll_position');
+		$('#' + id).remove();
-	if (scroll_position) {
+	} else {
-		$(window).scrollLeft(scroll_position.left);
+		$('.rx_modal').remove();
-		$(window).scrollTop(scroll_position.top);
-		body.removeData('rx_scroll_position');
 	}
+	*/
 }
 
 /**
@@ -934,7 +954,7 @@ function doDocumentLoad(obj) {
 	objForSavedDoc = obj.form;
 	var popup_url = request_uri.setQuery('module','document').setQuery('act','dispTempSavedList');
 	if (navigator.userAgent.match(/mobile/i)) {
-		openFullScreenIframe(popup_url);
+		openModalIframe(popup_url);
 	} else {
 		popopen(popup_url);
 	}

common/tpl/popup_layout.html

@@ -11,7 +11,7 @@
 		const iframe_sequence = '{{ $iframe_sequence }}';
 		window.opener = window.parent;
 		window.close = function() {
-			parent.closeFullScreenIframe('_rx_iframe_' + iframe_sequence);
+			parent.closeModal('_rx_iframe_' + iframe_sequence);
 		};
 	</script>
 	<style>

modules/editor/tpl/js/editor_common.js

@@ -211,7 +211,7 @@ function openComponent(component_name, editor_sequence, manual_url) {
 	if(typeof(current_mid)!="undefined" && current_mid) popup_url += "&mid="+escape(current_mid);
 
 	if (navigator.userAgent.match(/mobile/i)) {
-		openFullScreenIframe(popup_url, 'editorComponent');
+		openModalIframe(popup_url, 'editorComponent');
 	} else {
 		popopen(popup_url, 'editorComponent');
 	}
@@ -244,7 +244,7 @@ function editorSearchComponent(evt) {
 		if(editorMode[editor_sequence]=='html') return;
 		var popup_url = request_uri+"?module=widget&act=dispWidgetGenerateCodeInPage&selected_widget="+widget+"&module_srl="+editor_sequence
 		if (navigator.userAgent.match(/mobile/i)) {
-			openFullScreenIframe(popup_url, 'GenerateCodeInPage');
+			openModalIframe(popup_url, 'GenerateCodeInPage');
 		} else {
 			popopen(popup_url, 'GenerateCodeInPage');
 		}