请问2个jquery 的问题

1.现在有2个 div 然后点击btn1 弹出div1 然后div1 里有一组列表 然后点击该列表中的某一项 弹出div2 
此时问题来了 客户说用esc实现关闭 div 但是 我在打开每个div窗户的方法里都加了esc关闭相对应的div的esc触发方法 可是进入 div2之后点esc 连同div1 也一起关掉了。
有办法 点击一次esc关闭div2 然后再点一次关闭div1 呢 。2.如何清空div中的iframe 我使用 
$('#window01').children('.window_content').children('iframe').empty();//这样貌似//无法清空。。
//因为这个div要多次使用 所以每次关闭之后需要清楚 要不会有一定延迟 完成后还有100分相送

解决方案 »

  1.   

    1.按esc是的时候先判断div2是否存在或display的状态   存在div2先处理div2 没有的话在处理div12 吧iframe的src指向一个空连接就行了  
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>基于JQuery的JS遮罩层效果</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
        function showDiv() {
            document.body.style.overflow = 'hidden';
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            var _div = document.createElement('div');
            _div.className = 'divClass';
            _div.setAttribute('id', 'divId');
            document.body.appendChild(_div);
            document.getElementById('divId').style.width = docWidth + 'px';
            document.getElementById('divId').style.height = docHeight + 'px';
            var _divAlert = document.createElement('div');
            _divAlert.className = 'divalert';
            _divAlert.id = 'divalert';
            document.body.appendChild(_divAlert);
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
            var _divContent = document.createElement('div');
            _divContent.id = 'divcontent';
            _divAlert.appendChild(_divContent);
            var _divbtn = document.createElement('div');
            _divbtn.id = 'divbtn';
            var _btn = document.createElement('input');
            _btn.type = 'button';
            _btn.value = '确定';
            _btn.id = 'btn';
            _divbtn.appendChild(_btn);
            _divAlert.appendChild(_divbtn);
            document.getElementById('btn').onclick = function() {
                //document.getElementById('divId').style.display = 'none';
                //document.getElementById('divalert').style.display = 'none';
                /*document.body.removeChild(document.getElementById('divId'));
                document.body.removeChild(document.getElementById('divalert'));
                document.body.style.overflow = 'auto';*/
                showNewDiv(); 
            }
        }
            function showNewDiv() {
            document.body.style.overflow = 'hidden';
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            var _div = document.createElement('div');
            _div.className = 'divClass';
            _div.setAttribute('id', 'divIds');
            document.body.appendChild(_div);
            document.getElementById('divIds').style.width = docWidth + 'px';
            document.getElementById('divIds').style.height = docHeight + 'px';
            var _divAlert = document.createElement('div');
            _divAlert.className = 'divalert';
            _divAlert.id = 'divalerts';
            document.body.appendChild(_divAlert);
            document.getElementById('divalerts').style.left = 0 + 'px';
            document.getElementById('divalerts').style.top = 0 + 'px';
            var _divContent = document.createElement('div');
            _divContent.id = 'divcontents';
            _divAlert.appendChild(_divContent);
            var _divbtn = document.createElement('div');
            _divbtn.id = 'divbtns';
            var _btn = document.createElement('input');
            _btn.type = 'button';
            _btn.value = '确定';
            _btn.id = 'btnss';
            _divbtn.appendChild(_btn);
            _divAlert.appendChild(_divbtn);
            document.getElementById('btnss').onclick = function() {
                //document.getElementById('divId').style.display = 'none';
                //document.getElementById('divalert').style.display = 'none';
                /*document.body.removeChild(document.getElementById('divId'));
                document.body.removeChild(document.getElementById('divalert'));
                document.body.style.overflow = 'auto';*/
                //showDiv(); 
            }
        }
        function resizeDiv() {
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
            document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
        }
            function resizeNewDiv() {
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
            document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
        }
        /*window.onload = function() {
           showDiv(); 
        }
        window.onresize = resizeDiv;*/
        </script>
        <style type="text/css">
        body { margin:0; padding:0; }
        .divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
        .divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
        #divcontent,#divcontents { height:60px; }
        #divbtn,#divbtns { height:40px; background-color:#ddd; text-align:center; }
        #btn,#btnss { border:1px solid #000; margin-top:10px; }
        </style>
        </head>
        <body>
        <input id='btns' type='button' value='按钮' />
        <script type='text/javascript'>
        document.getElementById('btns').onclick = function() {
         showDiv(); 
         window.onresize = resizeDiv;
        };
        document.onkeydown = function(e) {
         if(e.keyCode == 27) {
         //document.getElementById('divalerts').style.display = 'none';
         if(document.getElementById('divalerts')) {
         //document.getElementById('divalerts').style.display = 'none';
         document.body.removeChild(document.getElementById('divalerts'));
         document.body.removeChild(document.getElementById('divIds'));
         document.body.style.overflow = 'auto';
         }
         else {
         //document.getElementById('divalert').style.display = 'none';
         document.body.removeChild(document.getElementById('divalert'));
         document.body.removeChild(document.getElementById('divId'));
         document.body.style.overflow = 'auto';
         }
         }
        };
        </script>
        </body>
        </html>
      

  3.   

    第二个问题
    document.getElementById('divId').removeChild(document.getElementById('iframeId'));
      

  4.   

    1
        $(document).keyup(function (e) {
            if (e.keyCode == 27) {
                var div1 = $('#div1'), div2 = $('#div2');
                if (div2.css('display') != 'none') div2.hide();
                else if (div1.css('display') != 'none') div1.hide();
            }
        });2
    $('iframe选择器').remove();
      

  5.   


    楼上正解+1,移除使用remove才是比较好的...
      

  6.   

    第二个我解决掉了。。可是第一个 为啥如果第二个隐藏然后返回false 但是还会再次进入判断   然后 else 执行关闭A窗口的操作呢。。$(document).bind("keydown", "esc", function (ev) {
    var div2 =$('#window01');
    var div1 =$('#window02');
    var div0 = $('#window');
    var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {
    alert(2222)
    div2.hide();
    return false;
    }else{
    //窗口B关闭 判断窗口A 是否隐藏 
    if (temp1==true) {
         alert(111)
    div1.hide();
    }
    }
        if (temp1==false) {
         alert(111)
    div1.hide();
        
        }
      

  7.   

    我照着这样改了一下  貌似 执行了多次。
    第一次 div2 存在时候 关闭div2
    然后又跟着走了一次 div2不存在 关闭 div1的操作 可是我加了让return false啊
    真的不解啊
      

  8.   

    没有吧。。我单独拿出来写的一个方法试试我的document.onkeydown = function(e) {
            if(e.keyCode == 27) {
                
                if(document.getElementById('div1')) {
                    document.getElementById('div1').style.display = 'none';
                    
                }
                else {
                    document.getElementById('div2').style.display = 'none';
                    
                }
            }
        };
      

  9.   

    没有吧。。我单独拿出来写的一个方法试试我的好!.你这样试试$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {
            alert(2222)
                div2.hide();
            return false;
            }else{
                //窗口B关闭 判断窗口A 是否隐藏 
                if (temp1==true) {
                    alert(111)
                    div1.hide();
                }
            }
        else if (temp1==false) {
            alert(111)
            div1.hide();
             
        }
      

  10.   

    没有吧。。我单独拿出来写的一个方法试试我的好!.你这样试试$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {
            alert(2222)
                div2.hide();
            return false;
            }else{
                //窗口B关闭 判断窗口A 是否隐藏 
                if (temp1==true) {
                    alert(111)
                    div1.hide();
                }
            }
        else if (temp1==false) {
            alert(111)
            div1.hide();
             
        }$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {            div2.hide();        }else if(temp1==false){                div1.hide();
            }
      

  11.   

    没有吧。。我单独拿出来写的一个方法试试我的好!.你这样试试$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {
            alert(2222)
                div2.hide();
            return false;
            }else{
                //窗口B关闭 判断窗口A 是否隐藏 
                if (temp1==true) {
                    alert(111)
                    div1.hide();
                }
            }
        else if (temp1==false) {
            alert(111)
            div1.hide();
             
        }$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {            div2.hide();        }else if(temp1==false){                div1.hide();
            }
    还是没用..
      

  12.   

    没有吧。。我单独拿出来写的一个方法试试我的好!.你这样试试$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {
            alert(2222)
                div2.hide();
            return false;
            }else{
                //窗口B关闭 判断窗口A 是否隐藏 
                if (temp1==true) {
                    alert(111)
                    div1.hide();
                }
            }
        else if (temp1==false) {
            alert(111)
            div1.hide();
             
        }$(document).bind("keydown", "esc", function (ev) {
        var div2 =$('#window01');
        var div1 =$('#window02');
        var div0 = $('#window');
        var temp= div2.is(":hidden"); //是否隐藏
        var temp1= div1.is(":hidden"); //是否可见
        if (temp==false) {            div2.hide();        }else if(temp1==false){                div1.hide();
            }
    还是没用..<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>基于JQuery的JS遮罩层效果</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
        function showDiv() {
            document.body.style.overflow = 'hidden';
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            var _div = document.createElement('div');
            _div.className = 'divClass';
            _div.setAttribute('id', 'divId');
            document.body.appendChild(_div);
            document.getElementById('divId').style.width = docWidth + 'px';
            document.getElementById('divId').style.height = docHeight + 'px';
            var _divAlert = document.createElement('div');
            _divAlert.className = 'divalert';
            _divAlert.id = 'divalert';
            document.body.appendChild(_divAlert);
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
            var _divContent = document.createElement('div');
            _divContent.id = 'divcontent';
            _divAlert.appendChild(_divContent);
            var _divbtn = document.createElement('div');
            _divbtn.id = 'divbtn';
            var _btn = document.createElement('input');
            _btn.type = 'button';
            _btn.value = '确定';
            _btn.id = 'btn';
            _divbtn.appendChild(_btn);
            _divAlert.appendChild(_divbtn);
            document.getElementById('btn').onclick = function() {
                //document.getElementById('divId').style.display = 'none';
                //document.getElementById('divalert').style.display = 'none';
                /*document.body.removeChild(document.getElementById('divId'));
                document.body.removeChild(document.getElementById('divalert'));
                document.body.style.overflow = 'auto';*/
                showNewDiv(); 
            }
        }
            function showNewDiv() {
            document.body.style.overflow = 'hidden';
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            var _div = document.createElement('div');
            _div.className = 'divClass';
            _div.setAttribute('id', 'divIds');
            document.body.appendChild(_div);
            document.getElementById('divIds').style.width = docWidth + 'px';
            document.getElementById('divIds').style.height = docHeight + 'px';
            var _divAlert = document.createElement('div');
            _divAlert.className = 'divalert';
            _divAlert.id = 'divalerts';
            document.body.appendChild(_divAlert);
            document.getElementById('divalerts').style.left = 0 + 'px';
            document.getElementById('divalerts').style.top = 0 + 'px';
            var _divContent = document.createElement('div');
            _divContent.id = 'divcontents';
            _divAlert.appendChild(_divContent);
            var _divbtn = document.createElement('div');
            _divbtn.id = 'divbtns';
            var _btn = document.createElement('input');
            _btn.type = 'button';
            _btn.value = '确定';
            _btn.id = 'btnss';
            _divbtn.appendChild(_btn);
            _divAlert.appendChild(_divbtn);
            document.getElementById('btnss').onclick = function() {
                //document.getElementById('divId').style.display = 'none';
                //document.getElementById('divalert').style.display = 'none';
                /*document.body.removeChild(document.getElementById('divId'));
                document.body.removeChild(document.getElementById('divalert'));
                document.body.style.overflow = 'auto';*/
                //showDiv(); 
            }
        }
        function resizeDiv() {
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
            document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
        }
            function resizeNewDiv() {
            var docHeight = Math.max(document.documentElement.scrollHeight,
            document.documentElement.clientHeight);
            var docWidth = Math.max(document.documentElement.scrollWidth,
            document.documentElement.clientWidth);
            document.getElementById('divId').style.width = document.documentElement.clientWidth + 'px';
            document.getElementById('divId').style.height = document.documentElement.clientHeight + 'px';
            document.getElementById('divalert').style.left = (document.documentElement.clientWidth - 200)/2 + 'px';
            document.getElementById('divalert').style.top = (document.documentElement.clientHeight - 100)/2 + 'px';
        }
        /*window.onload = function() {
           showDiv(); 
        }
        window.onresize = resizeDiv;*/
        </script>
        <style type="text/css">
        body { margin:0; padding:0; }
        .divClass { position:absolute; left:0; top:0; background-color:#ccc; z-index:0; }
        .divalert { position:absolute; z-index:2000; width:200px; height:100px; border:1px solid #666; background-color:#fff; }
        #divcontent,#divcontents { height:60px; }
        #divbtn,#divbtns { height:40px; background-color:#ddd; text-align:center; }
        #btn,#btnss { border:1px solid #000; margin-top:10px; }
        </style>
        </head>
        <body>
        <input id='btns' type='button' value='按钮' />
        <script type='text/javascript'>
        document.getElementById('btns').onclick = function() {
            showDiv(); 
            window.onresize = resizeDiv;
        };
        document.onkeydown = function(e) {
            if(e.keyCode == 27) {
                //document.getElementById('divalerts').style.display = 'none';
                if(document.getElementById('divalerts')) {
                    //document.getElementById('divalerts').style.display = 'none';
                    document.body.removeChild(document.getElementById('divalerts'));
                    document.body.removeChild(document.getElementById('divIds'));
                    document.body.style.overflow = 'auto';
                }
                else {
                    //document.getElementById('divalert').style.display = 'none';
                    document.body.removeChild(document.getElementById('divalert'));
                    document.body.removeChild(document.getElementById('divId'));
                    document.body.style.overflow = 'auto';
                }
            }
        };
        </script>
        </body>
        </html>可这个效果可以，不知什么原因
      

  13.   

    谢谢大家 我发现问题了 原来是 没有放在 init块里....