弹出窗口后对焦点转移的控制

Question

弹出窗口使用div实现， 非实际窗口； 弹出后虽然背景变灰，但使用Tab键一样可以转移焦点到背景窗口，按下Enter键可以激活对应功能。希望Tab键按下时焦点只在弹出窗口中转移，如何实现？以下是代码结构示例：JS部分： 控制窗口的弹出，关闭等.
function SimplePopup(id, oTab) {
    
  function ok() {    }
  
  function cancel() {  }
    
  /**
   * SHOW THE POPUP
   */
  function show(event) {    }  
}JSP部分：
<div class="pop_up dragme" id="createCurvePopup" style="display: none;">
  <div class="window_title" id="float_left">Create Curve</div>
  
    <input type="button" value="Clear" class="popbutton" id="popbuttonclearSC" onclick="CreateCurvePopup.clear()"/>
    <input type="button" value="Cancel" class="popbutton" id="popbuttoncancelSC" onclick="CreateCurvePopup.cancel()"/>
    <input type="button" value="OK" class="popbutton" id="popbuttoncloseSC" onclick="CreateCurvePopup.ok()"/>
  </div>
</div>CreateCurvePopup继承于SimplePopup本人JS很弱，希望各位高人解答的尽可能详细。谢谢！

Answer 1

http://jqueryui.com/demos/dialog/#modal-formJQuery提供的dialog控件就可以实现!
但本人还不清楚具体怎么控制
坐等高手

Answer 2

推荐插件http://www.oschina.net/p/domtab

Answer 3

//给弹窗监听keydown事件
//阻止tab
function fn(e){
    e = e || event;
    var key = e.keyCode || e.which;
    if (key == 9)
    {
        var obj = e.target || e.srcElement;
        if (obj.id == "弹窗里最后一个需要获得焦点的元素id")
        {
             //弹窗里第一个需要获得焦点的元素获得焦点
               return false;
        }    
    }
    return true;
};

Answer 4

//最常见的事件注册
function addListener(element,e,fn){ 
     if(element.addEventListener){ 
          element.addEventListener(e,fn,false); 
     } else { 
          element.attachEvent("on" + e,fn); 
     } 
} 
addListener(document.getElementById('createCurvePopup'),'keydown',fn);

Answer 5

使用了lianqin7建议的方法， 功能基本完成， 还有一点未明， 向各位高人请教。除了lianqin7提到的部分， 我还增加了以下方法, 目的是屏蔽用户在弹出窗口以外进行的任何动作， 鼠标点击其它区域， 按下Tab键， Space键均无效。<code>
function disableDiv(divID) {
  var objs = new Array();
  var strobj;
  strobj = "input|a|select|img";
  objs = strobj.split("|");
  for(k=0; k<objs.length; k++){
    var obj = document.getElementById(divID).getElementsByTagName(objs[k]);
    for (var i=0; i<obj.length; i++) {
      obj[i].disabled = true;
      obj[i].onkeypress = function() {
        this.disabled = true;
        return false;
      }
    }
  }
}
</code><code>
function enableDiv(divID) {
  var objs = new Array();
  var strobj;
  strobj = "input|a|select|img";
  objs = strobj.split("|");
  for(k=0; k<objs.length; k++){
    var obj = document.getElementById(divID).getElementsByTagName(objs[k]);
    for (var i=0; i<obj.length; i++) {
      obj[i].enabled = true;      
    }
  }
}
</code>屏蔽的功能已经实现， 也就是说disableDiv函数经测试没有问题， 但是如何在enableDiv函数中恢复被屏蔽掉的keypress事件， 还请大家多多指教。