subModal 回调函数和添加title示例

subModal  是一个非常漂亮好用的跨游览器的模态对话框。不用担心会被游览器拦截。我在使用过程中，发现官方网站上对该对话框的回调函数解释的不明朗。google了一下英文，也没有清楚的，于是自己写一个，方便大家查找。发到论坛里面，主要是为了

在搜索引擎里面，能够被找到。

 

这个是官方的说明，详细可参见http://sublog.subimage.com/articles/2007/01/11/using-the-callback-function-on-the-submodal

UsingCallbackFunction
Using callback functions with SubModal

1. Define the function that’ll be called on the opening page.
2. Pass the function you’d like to call into 'showPopWin'.
3. Assign any return value on the modal page itself, if necessary
4. Call the hidePopWin function passing true
   

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>

 

 

我做了例子在附件里面。