Popup

Pop-up UI is used to new features or provide additional information to a new window.

Layer Popup

Layer Pop-up is defined in three types, depending on the function or the amount of content.

APopup with Title - Basic

BPopup with Title - Wide

CAlert Popup


<div class="h-layer_body popup" id="popup2" aria-hidden="true" role="dialog">
	<div class="h-layer_wrap">
		<div class="h-layer_head">
			<h2 class="h-layer_title">Popup Title</h2>
			<button onclick="hlayerClose('popup2')" class="h-layer_close">Close</button>
		</div>
		<div class="h-layer_cont">
			<p>Basic Size(670px)</p>
			
			<div class="btn-type_wrap">
				<button onclick="hlayerClose('popup2')" class="btn-type _cancel">Cancel</button>
				<button onclick="hlayerClose('popup2')" class="btn-type _default">OK</button>
			</div>
		</div>
	</div>
</div>

<div class="h-layer_body popup" id="popup3" aria-hidden="true" role="dialog">
	<div class="h-layer_wrap _wide">
		<div class="h-layer_head">
			<h2 class="h-layer_title">Popup Title</h2>
			<button onclick="hlayerClose('popup3')" class="h-layer_close">Close</button>
		</div>
		<div class="h-layer_cont">
			<p>Wide Size(950px)</p>
			<div style="width:100px;height:300px;border:1px solid white;"></div>
			<div class="btn-type_wrap">
				<button onclick="hlayerClose('popup3')" class="btn-type _cancel">Cancel</button>
				<button onclick="hlayerClose('popup3')" class="btn-type _default">OK</button>
			</div>
		</div>
	</div>
</div>

<div class="h-layer_body popup" id="popup1" aria-hidden="true" role="dialog">
	<div class="h-layer_wrap _alert">
		<div class="h-layer_head">
			<button onclick="hlayerClose('popup1')" class="h-layer_close">Close</button>
		</div>
		<div class="h-layer_cont">
			<p class="in_tit">Title</p>
			<p>Sample Texts </p>

			<div class="btn-type_wrap">
				<button onclick="hlayerClose('popup1')" class="btn-type _default">OK</button>
			</div>
		</div>
	</div>
</div>

<script>
	hlayerOpen('Popup ID')   //Popup Open
	hlayerClose('Popup ID')  //Popup Close
</script>

Toast Popup

The toast message is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.


<button onclick="openSnippet('Trade-in application has added to your request');" class="" type="button">toast pop</button>

https://ctbguidesystem.com/Front/inventory/order.html