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上显示动态加载数据的场合。能力有限,如有异议,欢迎指教。