弹出层

从顶部或底部浮出的模态，提供标题和关闭按钮，展示和当前内容相关的信息或提供相关操作。

规则

提供清晰的关闭按钮。
弹出层会打断用户操作，所以用在重要的时候， eg.买入股票。

代码演示

弹出层

向上弹出

向下弹出

向上弹出

预定义好高度，若有需求可自定义，使用类popup-mask-action激活

<div class="popup-mask ">
	<div class="popup-wrapper popup-up-wrapper">
		<div class="popup">
			<div class="popup-title">描述一下<span class="popup-close icon-fork"></span></div>
			<div class="popup-body">
				<div class="list-ord">
					<div  class="list-item ">
						<div class="list-content">
							<div class="list-title">操作一</div>
						</div>
					</div>
					<div class="list-item ">
						<div class="list-content">
							<div class="list-title">操作二</div>
						</div>
					</div>
					<div class="list-item ">
						<div class="list-content">
							<div class="list-title">操作三</div>
						</div>
					</div>
					<div  class="list-item ">
						<div class="list-content">
							<div class="list-title">操作一</div>
						</div>
					</div>
					<div class="list-item ">
						<div class="list-content">
							<div class="list-title">操作一</div>
						</div>
					</div>
					<div class="list-item ">
						<div class="list-content">
							<div class="list-title">操作一</div>
						</div>
					</div>
				</div>
			</div>
			<div class="popup-btn">
				<div class="fixed-foot-wrapper">
					<div class="btn-wrapper g-footer">
						<button class="btn btn-block">取消预约</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

向下弹出

<div class="popup-mask">
	<div class="popup-wrapper popup-down-wrapper">
		<div class="popup">
			<div class="popup-title">描述一下<span class="popup-close icon-fork"></span></div>
			<div class="popup-body">
				<div class="list-ord">
					<div  class="list-item ">
						<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png"  class="list-icon-sm">
						<div class="list-content">
							<div class="list-title">操作一</div>
						</div>
					</div>
					<div class="list-item ">
						<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png"  class="list-icon-sm">
						<div class="list-content">
							<div class="list-title">操作二</div>
						</div>
					</div>
					<div class="list-item ">
						<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png"  class="list-icon-sm">
						<div class="list-content">
							<div class="list-title">操作三</div>
						</div>
					</div>
				</div>
			</div>
		</div>		
	</div>
</div>