模态窗指令ed-modal

模态窗指令用来显示弹窗。

一 使用方法:

<div ed-modal="modal" data-options="title: '弹出框演示', icon: 'fa-plus', width: 760, onOkClick: function() {alert('您点击了确定');}, onHidden: function(){alert('关闭了');}">
	    <div>
	     
	   我是一个弹出框,通过data-options="title: '弹出框演示', icon: 'fa-plus', width: 760, onOkClick: function() {alert('您点击了确定');}, onHidden: function(){alert('关闭了');}"     
	    弹出框演示'来设置属性:标题、图标、宽度、事件     
	</div>
	</div>
	

ed-modal定义模态框,并指定模态窗的名称,支持嵌套

  • 通过`data-options设置模态窗属性
    • title标题
    • icon标题前的图标class样式
    • width:宽度,不需带上单位,默认为500
    • static:设置失去焦点是否关闭,默认为false关闭,
    • defaultButton是否显示默认按钮,默认true。如果弹出框中为需要校验的form,可以隐藏默认按钮,在弹窗内容中自己添加按钮来实现
    • onOkClick确定事件,可以为匿名function,也可为$scope的方法名称
    • onHidden模态窗关闭时触发事件,同上
  • 绑定到ed-modal名称下有以下方法:
    • show()显示模态窗
    • hide()隐藏模态窗

注意

该指令需结合eastdigit-assert 0.20160428.09以上使用,并导入下列资源:

    <!-- 加在colorpicker.css那一行之后 -->
	    <link href="./assets/global/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
	    <link href="./assets/global/plugins/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet" />
	     
	<!-- 加在bootstrap-switch.min.js那一行之后 -->
	    <script src="./assets/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
	    <script src="./assets/global/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
	

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将给予删除