微擎中自定义弹出自定义对话框

最新推荐文章于 2022-05-02 18:06:52 发布

原创最新推荐文章于 2022-05-02 18:06:52 发布 · 1.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

技术文章

本文分享了在微擎框架中如何实现自定义对话框的二次开发，包括创建对话框的方法及参数说明，并提供了两种使用示例代码。

微擎中自定义弹出自定义对话框

最近在用微擎开发一个公众号，虽然微擎功能模块很完善也很强大，但没有资格吐槽的文档，只能让我一次次地翻阅源代码，从而更好的满足个性化的开发需求。

今天分享的是微擎框架二次开发的自定义对话框。

在微擎中，系统自定义了一系列调用方便的对话框，比如图片上传宣传、粉丝选择、模块选择等，但一直未找到可以打开自定义对话框的的文档。经过查看源代码结合其他网友的经验。总结如下：

1.创建对话框
util.dialog = function(title, content, footer, options) 。
使用自带的UTIL模块，创建
参数：
title标题
content对话框内容，可以通过AJAX的方式获取
footer：底部内容，通常为关闭按钮
opentions，数组参数，我只用到了，指定对话框显示容器的参数
var options = {“containerName”:“material-Modal”}; //注意：我尝试过用自己的自定义DIV作为容器，但是显示容易异常，经过调试发现，后台的每个页面，都会自动添加div.material-Modal,每次打开对话框，系统默认使用的的容器DIV就是这个，所以我也使用这个，结果显示自动居中，正常。

二话不说，附上代码


//第一种方式：使用AJAX获取内容，后端直接返回HTML代码即可
________HTML________
<a href="httpURL" onClick="return showDialog(this)" style="z-index: 20000">小窗查看</a>
///________JS_________
function showDialog(obj)
	{	
		contenturl=obj.getAttribute("href");
		
		title=$(obj).html();
		 $.get(contenturl,function(data){
			 	var options = {"containerName":"material-Modal"};	
				var footer = '<button class="btn btn-danger close2">关闭</button>';	 
                var content = data;
                var model=util.dialog(title, content, footer,options);
				model.find(".modal-body").css({height:"700px","overflow-y":"auto"})
				model.modal({keyboard:!1}),
				model.modal('show');
				model.removeClass("fade");
				model.find(".close2").click(function(){model.modal("hide");})
				return false;
            },'html');
		return false;		
	}

//第二种方式，直接打开
//JS
function showDialog2(contenturl)
	{
		var options = {"containerName":"material-Modal"};		
		var title="查看简历";
        var content = "测试自定义对话框";
        var footer = '<button class="btn btn-danger close2">关闭</button>';
		
		var model=util.dialog(title, content, footer,options);
		model.find(".modal-body").css({height:"700px","overflow-y":"auto"})
		model.modal({keyboard:!1}),
		model.modal('show');
		model.removeClass("fade");
		model.find(".close2").click(function(){model.modal("hide");})
		return false;
	}