1. 程式人生 > >Discuz!開發之js彈出框函式showDialog介紹

Discuz!開發之js彈出框函式showDialog介紹

showDialog定義地址:\static\js\common.js

var showDialogST = null;
function showDialog(msg, mode, t, func, cover, funccancel, leftmsg, confirmtxt, canceltxt, closetime, locationtime) {
	clearTimeout(showDialogST);
	cover = isUndefined(cover) ? (mode == 'info' ? 0 : 1) : cover;
	leftmsg = isUndefined(leftmsg) ? '' : leftmsg;
	mode = in_array(mode, ['confirm', 'notice', 'info', 'right']) ? mode : 'alert';
	var menuid = 'fwin_dialog';
	var menuObj = $(menuid);
	var showconfirm = 1;
	confirmtxtdefault = '確定';
	closetime = isUndefined(closetime) ? '' : closetime;
	closefunc = function () {
		if(typeof func == 'function') func();
		else eval(func);
		hideMenu(menuid, 'dialog');
	};
	if(closetime) {
		showPrompt(null, null, '<i>' + msg + '</i>', closetime * 1000, 'popuptext');
		return;
	}
	locationtime = isUndefined(locationtime) ? '' : locationtime;
	if(locationtime) {
		leftmsg = locationtime + ' 秒後頁面跳轉';
		showDialogST = setTimeout(closefunc, locationtime * 1000);
		showconfirm = 0;
	}
	confirmtxt = confirmtxt ? confirmtxt : confirmtxtdefault;
	canceltxt = canceltxt ? canceltxt : '取消';


	if(menuObj) hideMenu('fwin_dialog', 'dialog');
	menuObj = document.createElement('div');
	menuObj.style.display = 'none';
	menuObj.className = 'fwinmask';
	menuObj.id = menuid;
	$('append_parent').appendChild(menuObj);
	var hidedom = '';
	if(!BROWSER.ie) {
		hidedom = '<style type="text/css">object{visibility:hidden;}</style>';
	}
	var s = hidedom + '<table cellpadding="0" cellspacing="0" class="fwin"><tr><td class="t_l"></td><td class="t_c"></td><td class="t_r"></td></tr><tr><td class="m_l">  </td><td class="m_c"><h3 class="flb"><em>';
	s += t ? t : '提示資訊';
	s += '</em><span><a href="javascript:;" id="fwin_dialog_close" class="flbc" onclick="hideMenu(\'' + menuid + '\', \'dialog\')" title="關閉">關閉</a></span></h3>';
	if(mode == 'info') {
		s += msg ? msg : '';
	} else {
		s += '<div class="c altw"><div class="' + (mode == 'alert' ? 'alert_error' : (mode == 'right' ? 'alert_right' : 'alert_info')) + '"><p>' + msg + '</p></div></div>';
		s += '<p class="o pns">' + (leftmsg ? '<span class="z xg1">' + leftmsg + '</span>' : '') + (showconfirm ? '<button id="fwin_dialog_submit" value="true" class="pn pnc"><strong>'+confirmtxt+'</strong></button>' : '');
		s += mode == 'confirm' ? '<button id="fwin_dialog_cancel" value="true" class="pn" onclick="hideMenu(\'' + menuid + '\', \'dialog\')"><strong>'+canceltxt+'</strong></button>' : '';
		s += '</p>';
	}
	s += '</td><td class="m_r"></td></tr><tr><td class="b_l"></td><td class="b_c"></td><td class="b_r"></td></tr></table>';
	menuObj.innerHTML = s;
	if($('fwin_dialog_submit')) $('fwin_dialog_submit').onclick = function() {
		if(typeof func == 'function') func();
		else eval(func);
		hideMenu(menuid, 'dialog');
	};
	if($('fwin_dialog_cancel')) {
		$('fwin_dialog_cancel').onclick = function() {
			if(typeof funccancel == 'function') funccancel();
			else eval(funccancel);
			hideMenu(menuid, 'dialog');
		};
		$('fwin_dialog_close').onclick = $('fwin_dialog_cancel').onclick;
	}
	showMenu({'mtype':'dialog','menuid':menuid,'duration':3,'pos':'00','zindex':JSMENU['zIndex']['dialog'],'cache':0,'cover':cover});
	try {
		if($('fwin_dialog_submit')) $('fwin_dialog_submit').focus();
	} catch(e) {}
}

引數意義:

showDialog(msg, mode, t, func, cover)

msg:內容,支援html

mode:提升模式,從函式裡面看,支援'confirm'(顯示確定,取消按鈕), 'notice'(顯示確定按鈕), 'info'(只有內容,除了關閉標誌,沒有任何按鈕),這幾個mod如果沒有被定義,預設使用alert,也就是錯誤提示,顯示一個X再加一個確定按鈕

t:也就是title,留空會使用“提示資訊”著四個字

func:點選fwin_dialog_submit,也就是確定按鈕的時候執行的動作,如果用typeof 檢查結果是一個函式,就執行之,不用請填寫NULL

cover:使用背景遮罩

使用例項:

<div id=”divajax”></div>

<p><a href=”result.php” onclick=”showWindow('test',this.href);return false;”>顯示一個浮動視窗來返回ajax結果,這裡用到了showWindow函式</a></p>

<a  href=”javascript:;” onclick=”showDialog('演示document.write()!', 'confirm', '演示', 'document.write (\'演示document.write()\')',1)”>document.write</a>

<a  href=”javascript:;” onclick=”showDialog('演示location.href()!', 'confirm', '演示', 'parent.location.href=\'http://g.cn\”,1)”>location.href</a>

<a  href=”javascript:;” onclick=”showDialog('演示ajaxget(),輸出到id=divajax的這一層裡面', 'confirm', '演示', 'ajaxget(\'result.php?\',\'divajax\')', 1)”>ajaxget</a>