对话框

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出对话框进行二次确认。

规则

尽可能少用。对话框会打断用户操作，只用在重要的时候。
标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。
操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用动作面板组件来完成。
一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

代码演示

对话框

对话框(可关闭)

弹出框

对个按钮

输入框

基本

<div class="modal-mask " >
	<div class="modal-wrapper">
		<div class="modal">
			<div class="modal-icon icon-close"></div>
			<div class="modal-title">解除绑定</div>
			<div class="modal-body ">
				<div class="txt-insign">这是内容的部分</div>
				<div class="txt-insign">这是内容的部分</div> 	
			</div>
		</div>
	</div>
</div>

确认弹出框

<div class="modal-mask " >
	<div class="modal-wrapper">
		<div class="modal">
			<div class="modal-title">解除绑定</div>
			<div class="modal-body ">
				<div class="txt-insign">确定要解除绑定医疗保险卡吗？</div> 	
			</div>
			<div class="modal-footer">
				<div class="modal-button-group-h">
					<a  class="modal-button">取消</a>
					<a  class="modal-button">解除绑定</a>
				</div>
			</div>
		</div>
	</div>
</div>

多个按钮

<div class="modal-mask ">
	<div class="modal-wrapper">
		<div class="modal">
			<div class="modal-title">多个按钮项</div>
			<div class="modal-body ">
				<div class="txt-insign">竖排操作按钮不超过三个</div> 	
			</div>
			<div class="modal-footer">
				<div class="modal-button-group-v">
					<a  class="modal-button">按钮一</a>
					<a  class="modal-button">按钮二</a>
					<a  class="modal-button">按钮三</a>
				</div>
			</div>
		</div>
	</div>
</div>

带输入框

<div class="modal-mask ">
	<div class="modal-wrapper">
		<div class="modal">
			<div class="modal-title">输入名字</div>
			<div class="modal-body ">
				<div class="txt-insign">这里可以输入名字的信息</div>
				<input class="modal-input" type="text" name=""> 	
			</div>
			<div class="modal-footer">
				<div class="modal-button-group-h">
					<a  class="modal-button">取消</a>
					<a  class="modal-button">提交</a>
				</div>
			</div>
		</div>
	</div>
</div>