subModal 是一个非常漂亮好用的跨游览器的模态对话框。不用担心会被游览器拦截。我在使用过程中,发现官方网站上对该对话框的回调函数解释的不明朗。google了一下英文,也没有清楚的,于是自己写一个,方便大家查找。发到论坛里面,主要是为了
在搜索引擎里面,能够被找到。
这个是官方的说明,详细可参见http://sublog.subimage.com/articles/2007/01/11/using-the-callback-function-on-the-submodal
UsingCallbackFunction
Using callback functions with SubModal
It might be easier to grok in code, so here's an example:
On the SubModal opening page
// returnVal can get passed in from the modal page itself... //....see below for info function returnRefresh(returnVal) { window.document.reload(); } // Open the modal, passing in the refresh function // as a reference NOT a string. showPopWin('mymodal.html', 500, 500, returnRefresh);
From inside the SubModal window
// If you plan to pass a return value assign it var returnVal = "something"; // When you're ready to close the pop window // call this...Passing true makes sure the return // function gets called. window.top.hidePopWin(true);
经本人实验,如果要从模态对话框中成功传回数据:
在弹出的对话框中页面,回传的值必须是全局变量,例子中的就是
var returnVal = "something";
的必须是全局变量.
附带说明一下,经过实验,发现subModal 约定了返回回调函数的变量必须是returnVal ,也就是说,在弹出对话框中:
要传回回调函数的变量名称必须是returnVal ,同时,回调函数中的参数名称也必须是returnVal,也就是说,如果你写了
这么个例子:
SubModal window
var returnVal2 = "something";
Parent window
function returnRefresh(returnVal) {
alert(returnVal);
}
或者这样一个例子:
SubModal window
var returnVal = "something";
Parent window
function returnRefresh(returnVal2) {
alert(returnVal);
}
或者:
SubModal window
var returnVal2 = "something";
Parent window
function returnRefresh(returnVal2) {
alert(returnVal);
}
都会返回undefined
第二个问题,如何给弹出的对话框加标题:
如果你是使用JQuery 问题就很简单,在你使用showPopWin() 函数之后,
紧接着调用$('#popupTitle').text('Some new Title');
如果不使用JQuery,用这个也行
document.getElementById('popupTitle').innerHTML="Some new Title";
因为subModal实现的对话框,实际上是通过javascript生成了如下的代码:
<div id="popupContainer"> <div id="popupInner"> <div id="popupTitleBar"> <div id="popupTitle"></div> <div id="popupControls"> <img src="close.gif" onclick="hidePopWin(false);" /> </div> </div> <iframe src="loading.html" style="width:100%;height:100%;background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"> </iframe> </div> </div>
我做了例子在附件里面。