Jquery mobile 中用popup弹出对话框的实现

Jquery mobile中用popup弹出对话框的实现

//展示对话框
function selfPopupShow(id){
	var popupWrp = $("#"+id+"Popup");
	if(popupWrp.length < 1){
		var popupWrp = $('<div id="'+id+'Popup" data-role="popup" data-theme="e" data-overlay-theme="a" data-dismissible="false" class="ui-popup-container ui-popup-active ui-popup ui-corner-all"></div>');
		popupWrp.append('<a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" οnclick="selfPopupClose(\''+id+'\')" href="#">Close</a>');
		popupWrp.append('<div id="'+id+'" class="ui-content" data-role="main" style="height:400px; overflow:auto"></div>');
		popupWrp.appendTo($.mobile.pageContainer);
		
	//用$.mobile.activePage时，如果不是通过popupWrp.popup("close");关闭的，且页面没重新加载，则			在第二次打开popup时要显示的数据不会显示（其实就是popup重复，即id重复，因id重复而无法得到正常显示popup），
		//$.mobile.activePage.append(popupWrp);
	}
	popupWrp.trigger('create');
	popupWrp.popup().enhanceWithin();
	var openPopupFunc = function(){
		popupWrp.popup("open");
	}
	return openPopupFunc;
	
}
//关闭对话框
function selfPopupClose(id){
	var popupWrp = $("#"+id+"Popup");
	popupWrp.popup().enhanceWithin();
	popupWrp.popup("close");
	
}

说明： selfPopupShow(id)，参数为对话框的唯一id，返回值是将生成的对话框打开的方法（这样做的好处是处理一些异步问题，就像有得时候，如果要加载的数据量延迟稍长一些时，弹出对话框的时候就成分两次弹出的，先弹出遮盖层，一会后才显示出数据内容，这样的体验不好，如果这样做的话可以等数据加载完了在弹出popup）。

使用举例：

	var openPopupFunc = selfPopupShow("schemePage");
	$("#schemePage").html("");
	var url = "";//自己请求数据的url
	$("#schemePage").load(url,function(){
		openPopupFunc();
	});

说明：本方法适合用在一些需要在popup上显示动态加载数据的场合。能力有限，如有异议，欢迎指教。