插件之弹层

未结帖
0 711
ajian admin_jim 2017-01-10
悬赏:5飞吻
//转载http://www.vomoc.com/vmc/dialog
<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
 
<!-- 引入vmcDialog插件脚本及样式文件 -->
<script type="text/javascript" src="vmc.dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="theme/default/style.css" />
 
<!-- Javascript -->
<script type="text/javascript">
	/* 配置选项 */
	var options = {
		// 主题皮肤
		theme: 'default',
		// 创建时默认是否隐藏
		show: true,
		// 是否全屏
		full: false,
		// 禁用滚动条
		fix: false,
		// 窗口类型,text|html|dom|frame
		type: 'text',
		// type非FRAME时窗口显示内容,type为FRAME时窗口调用网址
		body: '',
		// 标题文字 false|显示文字
		title: '新建窗口',
		// 标题是否有关闭按钮
		titleClose: true,
		// 拖拽标题栏移动窗口位置
		draggable: true,
		// 拖拽范围限制
		range: true,
		// 是否使用按钮 false|[{text:(string),click:(function)},{text:(string),click:(function)}]
		button: false,
		// 延迟关闭(秒) 0不关闭
		time: 0,
		// 窗口尺寸 [宽度auto|(number), 高度auto|(number)]
		size: ['auto', 'auto'],
		// 内容最小尺寸,size为auto时有效 [宽度(number), 高度(number)]
		minSize: [180, 30],
		// 窗口位置[X轴auto|(number), Y轴auto|(number), 参考位置[1-4]] 
		pos: ['auto', 'auto', 1],
		// 层叠顺序
		zIndex: 99999,
		// 对话框背景颜色
		backgroundColor: '#FFF',
		// 对话框边框宽度
		borderWidth: 1,
		// 对话框边框颜色
		borderColor: '#444',
		// 是否显示阴影
		shade: true,
		// 阴影宽度
		shadeBorder: 4,
		// 阴影颜色
		shadeColor: '#000',
		// 阴影透明度
		shadeOpacity: 0.3,
		// 是否为模态行为,模态行为时有遮罩层
		modal: true,
		// 遮罩层颜色
		overlayColor: '#000',
		// 遮罩层透明度
		overlayOpacity: 0.3,
		// 是否点击遮罩层关闭窗口
		overlayClose: true,
		// 彻底关闭
		closeTrue: false,
		// 窗口创建完成回调函数
		create: function(vui) {},
		// 销毁窗口回调函数
		destroy: function(vui) {},
		// 关闭前回调函数,如果返回false,则取消关闭
		beforeClose: function(vui) {},
		// 关闭窗口后回调函数
		close: function(vui) {},
		// 打开窗口前回调函数
		beforeOpen: function(vui) {},
		// 打开窗口后回调函数
		open: function(vui) {}
	};
	/* 创建对话框 */
	$.vmc.dialog(options);
</script>

页面调用示例

<!-- 扩展 -->    
<script type="text/javascript">    
$(function() {    
prettyPrint();    
$('#iframe').on('click', function() {    
$.vmc.dialog({    
//full:true,    
//show: false,    
type: 'frame',    
//body: '<div class="vuidg-content-text">为什么赛撒旦</p></div>',    
body: 'http://www.vomoc.com/',    
//size: ['auto', 'auto'],    
size: [1016, 500],    
//pos: [100, 100, 4],    
fix: true,    
//modal: false,    
//  time: 2,    
overlayClose: true,    
//shade: false,    
//borderWidth:0,    
//draggable:false,    
//range: false,    
//closeTrue:true,    
close: function() {},    
button: [{    
text: '按钮',    
click: function(vui) {    
vui.close();    
}    
}]    
});    
});    
$('#msg').on('click', function() {    
$.vmc.msg('提示消息');    
});    
$('#alert').on('click', function() {    
$.vmc.alert('警告提示', function() {    
$.vmc.msg('好的');    
});    
});    
$('#confirm').on('click', function() {    
$.vmc.confirm('确认删除?', function() {    
$.vmc.msg('删除成功!');    
}, function() {    
$.vmc.msg('删除失败!');    
});    
});    
});    
</script>


热忱回答0


最近热帖

近期热议

  1. javascript——prototype与__proto 9
  2. Mysql 中出现的Data truncated for column 3
  3. 在nginx中使用x-sendfile的解决方案 3
  4. 高版本jQuery面插件实现Ajax上传图片 1
  5. Thinkphp Socket.class.php 类的使用 1
  6. 使用ionic3创建第一个App 0
  7. ios-oc html5 0
  8. nginx.conf 0
  9. 基于ionic3.4.0的项目搭建 0
  10. php 缩略图 0