[ AJAX核心 ] 如何利用div+javascript模拟javascript的Confirm 话框? ---- (技术讨论，请勿乱顶，谢谢)

Question

传统代码：
... // 代码段A
var a = confirm("...");
... // 代码段B传统运行：
1.运行“代码段A”。
2.用户选择cinform上的“确定”或“取消”。
1.运行“代码段B”。
----------------------------------------------------------
Ajax要求：
1.利用div+javascript，探出div confirm对话框。
2.实现var a = confirm("...")。
------------------------------------------------------------
注意：
以往自定义confirm对话框代码不外乎如下类：
1.使用模式窗口模拟confirm。
致命缺点：ajax要求无跳转，要求无弹出窗口，只能用div实现。
2.在自定义div confirm窗口中就实现点击后的代码。
致命缺点：无法迁移。var a = confirm("...")的好处在于可以任意使用confirm。
3.技术讨论，请勿馆水。

Answer 1

晕~关AJAX什么事，confirm不一定要窗口跳转吧

Answer 2

Just to think...
1//創建一個容器
function CreateConfirm(referencElement,message,blockCaption)
  if(typeof(referencElement) == undefined){ //throw error message:沒有參考的元素.}
  if(typeof(message) == undefined){//throw error message :沒有提示內容.}  var confirmState = false;                            //Returner
  var containerDiv = document.createElement("div");    //Dialog container
  var captionDiv = document.createElement("div");      //Caption
      if(blockCaption != null){
         var textNode = document.createTextNode("blockCaption");
         captionDiv.appendChild(textNode);
         }
  var messageSpan = document.createElement("span");    //Message
      messageSpan.innerText = message;
  var btnContainerDiv = document.createElement("div"); //Button container
  var btnOk = document.createElement("input");         //OK button
      btnOk.type = "button";
      btnOk.value = "OK";
      btnOk.id = "input_btnOk";
      if(btnOk.addEventListener){
         btnOk.addEventListener("click","handlerFunc(true)");  //Attach handler event
         }
      else{
         btnOk.attachEvent("onClick","handlerFunc(true)");
       }
  var btnCancel = document.createElement("input");     //Cancel button
      btnCancel.type = "button";
      btnCancel.value = "Cancel";
      btnCancel.id = "input_btnCancel";
      if(btnCancel.addEventListener){
         btnCancel.addEventListener("click","handlerFunc(false)");
         }
      else{
         btnCancel.attachEvent("onClick","handlerFunc(false)");
       }
  btnContainerDiv.appendChild(btnOk);
  btnContainerDiv.appendChild(btnCancel);
  containerDiv.appendChild(captionDiv);
  containerDiv.appendChild(messageSpan);
  containerDiv.appendChild(btnContainerDiv);
  var handlerFunc = function(clickState){  //event handler for click
      confirmState = clickState;
      containerDiv.display = "hidden";
      }
  
  return confirmState;
}
只是想法,其中的操作不一定能實現.

Answer 3

忘了最後一個referencElemnt.appendChild(containerDiv);用的時候可以這樣
<div id="confirmContainer"></div>somoting load evnet to do ...
  if(CreateConfirm(getElementById("confirmContainer"),"some message","captions")){
         to do something...
   }

Answer 4

其实这是javascript模式问题，alert、confirm、模式对话框都是模式窗口，故理论上本案无法实现。

Answer 5

我注意到在Ajax技术区也有同样的帖子，昨天见了，做了个尝试，但是，始终没有找到一个很好的办法来实现类似多线程编程中的sleep（）的功能，如果可以的话，问题可以解决
我在ajax技术区的回帖如下，望讨论
-------------------------------------------------------------------------------
javascript中有几个模态阻塞对话框需要模拟分别是：
alert()
prompt()
confirm()
showModalDialog()
这些对话框的共同特点都是执行代码后，包含该代码的代码段都要停止或者说阻塞，等操作返回时，被阻塞的代码继续执行，类似断点。
通常，我们只所以要进行模拟，目的在于改善用户界面体验，或者说我们不想使用ie提供的那种默认的对话框样式，所以，我们想使用div层来进行模拟。
而模拟的难点其实在于如何实现一个类似于其他多线程编程语言中提供的Sleep（）函数，但是，javascript是单线程执行的，这一点很可能不久的将来会得到改变，比如，以后很可能会支持如下的javascript脚本
function getValue()
{
   while( document.getElementById("name").value == "" )
   {
        window.sleep(100);//#####将来或许能支持，当前尚不支持该函数
   }
   return document.getElementById("name").value
}
这段代码虽然很简单，但是，我认为，如果能实现该功能了，那么，对上面提到的模拟工作就没有问题的了。其实，我们真正需要的是一个能够使线程进入休眠状态从而让出时间片的sleep（）函数，为什么这样说，如果上面的函数写成了像下面的样子，尽管功能是相同的，但是，确会使得程序进入死循环而造成页面假死状态
function getValue()
{
    while(document.getElementById("name").value=="")
    {
    }
    return document.getElementById("name").value;
}
因此，能否利用现有的javascript技术来模拟sleep（）应该是该问题的一个核心所在。比如说我们试图写如下的代码段
var name = myPrompt.show("请输入姓名：");
alert(name);
我们的目的是希望我们自己的myPrompt.show()函数创建一个div层来模拟prompt（），这点不难做到，继续下去，在myPrompt.show()里面创建一个div层之后，就需要等待用户输入并点击确定按钮了，确定后，提取用户输入内容作为myPrompt.show()的返回值，问题就在于，我们如何在myPrompt.show()函数中创建一个div层后等待用户的输入，直到用户输入并点击确定按钮后，再继续执行myPrompt.show()函数后面的代码，我们最容易想到的解决办法就是执行一个循环语句，循环检测某个变量是否被赋值（该变量是在用户点击确定按钮时赋值的），如果还没有被赋值，那么，继续等，如果赋值则结束循环，代码继续。如何实现这个，回到了前面讨论的那个getValue（）的实现上了，要循环检测但又不造成假死，只有实现sleep（）的功能。我为了做测试，实现了一个模拟prompt的代码，但是！！！！上面提到的问题没有解决！！！！把代码贴出来，希望和兄弟们一起讨论解决之道。注意：this.waitForUserInput();就是我无法实现的一个函数，也就是模拟sleep（）功能
--------------------------------------------------------------------------------
AjaxPrompt = 
{
div_handle:null,
msk_handle:null,
div_value:null,
timer_name:null,
show:function()
{
this.showMaskPage();
this.showMyPrompt();
this.waitForUserInput();
this.hideMaskPage();
return this.div_value;
},
showMaskPage : function()
{
this.msk_handle = document.createElement("<div style=\"z-index:1000;position:absolute;top:0;left:0;width:"+document.body.clientWidth+";height:"+document.body.clientHeight+"\"></div>");
document.body.appendChild(this.msk_handle);
this.msk_handle.innerHTML = "<iframe style=\"FILTER:Alpha(opacity=20);width:100%;height:100%\"></iframe>";
},
hideMaskPage : function()
{
if(this.msk_handle!=null)
{
document.body.removeChild(this.msk_handle);
this.msk_handle = null;
}
},
showMyPrompt : function()
{
this.div_handle= document.createElement("<div style=z-index:1001;position:absolute;top:200;left:300;width:100;height:50;background-color:#cccccc></div>");
this.div_handle.innerHTML = "<input id=myprompt_userinput value=请您输入数据><input id=myprompt_button type=button value=确定>";
document.body.appendChild(this.div_handle);
document.getElementById("myprompt_button").onclick = this.setUserInput;
},
setUserInput : function()
{
AjaxPrompt.div_value = document.getElementById("myprompt_userinput").value;
document.body.removeChild(AjaxPrompt.div_handle);
},
waitForUserInput : function()
{
//这里需要实现类似sleep（）的功能
}
}
--------------------------------------------------------------------------------
代码希望如下调用
function test()
{
    var name = AjaxPrompt.show();
    alert(name);
}
但是，由于this.waitForUserInput();没有能够实现预想的效果，因此，运行后，alert出来的始终是null