zoukankan      html  css  js  c++  java
  • 用div替代模态窗口

        一直用惯了弹出modal窗口,总觉得用url传值和关闭窗口后刷新父窗体都用的很别扭.今天项目中恰好又出现了以前类似的情况,想图个新鲜使用下弹出层来作,这样对于页面的控制逻辑也清晰了很多.
        网上搜索了一篇文章,代码和注释都还不错,虽然没具体使用,不过先copy下来,等着测试咯.
        作者是园子里面的 jecray兄弟

    拒绝session丢失 利用DIV层实现对模态窗口的模拟

     使用window.showModalDialog进行信息的提示,相当方便,也容易控制外观和布局。但是存在一个严重的问题,就是Session丢失。当在A页面进行showModalDialog时,弹出的模态窗口open新页面或new dialog()时,会得不到A页面中的Session,这样就严重地限制了他的使用范围。

    进一步的使用模式窗口可以发现session的丢失总是便随页面的刷新
    1.在普通页面中弹出模式窗口且进行new dialog()操作时 会造成该进程中所有页面session的丢失

    2.在模式窗口嵌套使用时 弹出的模式窗口并不会使父模式窗口的session丢失 但是会取不到父模式窗口的值

    3.在弹出的模式窗口中使用js脚本需要验证表单时 如果出现return true or false之类的语句,会造成模态窗口session的丢失。

    用showModalDialog经常出现这样那样奇怪的问题,因此最好少用showModalDialog。替代的方法就是用DIV来模拟实现模式窗口相同的功能。

    html代码如下

    <div id="id2"> <!--这个是弹出的层-->
      
    <table height="100" width="200">
        
    <tr>
          
    <td>                                
          
    <div id="ShowMSG"></div>
          
    </td>
        
    </tr>
        
    <tr>
    <td align="center"><input class="Button60" onclick="divhide()" type="button" value="关闭" name="btnDo">
     </td>
        
    </tr>
      
    </table>
    </div>
    <div id="id1">这里是弹出层后的背景 可以不放内容</div>

    在Css中设置弹出窗口的颜色背景透明度等

    #id1{100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);
    }

    #id2
    {top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}

    js代码如下 可以对层进行拖拽 随意进行移动

    function divshow(showmsg)//弹出窗口
    document.getElementById("id1").style.height=window.screen.height+"px";
    document.getElementById(
    "id1").style.width=window.screen.width+"px";
    document.getElementById(
    "id1").style.display='block';
    document.getElementById(
    "id2").style.display='block';
    document.getElementById(
    "ShowMSG").innerText = showmsg;
    }

    function divhide(){  //隐藏窗口 
    document.getElementById("id1").style.display='none'
    document.getElementById(
    "id2").style.display='none'
    }


    self.onError
    =null;                              
    currentX 
    = currentY = 0;                               
    whichIt 
    = null;                                         
    lastScrollX 
    = 0; lastScrollY = 0;                              
    NS 
    = (document.layers) ? 1 : 0;                             
    IE 
    = (document.all) ? 10;                              
    <!-- STALKER CODE -->                              
    function heartBeat() {                              
    if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }                             
    if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }           
    if(diffY != lastScrollY) {            
    percent 
    = .1 * (diffY - lastScrollY);    
    if(percent > 0) percent = Math.ceil(percent); 
    else percent = Math.floor(percent);  
    if(IE) document.all.id2.style.pixelTop += percent;  
    if(NS) document.id2.top += percent;                 
    lastScrollY 
    = lastScrollY + percent;      
    }
                           
    if(diffX != lastScrollX) {       
    percent 
    = .1 * (diffX - lastScrollX);     
    if(percent > 0) percent = Math.ceil(percent);       
    else percent = Math.floor(percent);                   
    if(IE) document.all.id2.style.pixelLeft += percent;        
    if(NS) document.id2.left += percent;       
    lastScrollX 
    = lastScrollX + percent;                     
    }
                               
    }
                             
    <!-- /STALKER CODE -->              
    <!-- DRAG DROP CODE -->              
    function checkFocus(x,y) {         
    stalkerx 
    = document.id2.pageX;     
    stalkery 
    = document.id2.pageY;                        
    stalkerwidth 
    = document.id2.clip.width;              
    stalkerheight 
    = document.id2.clip.height;                         
    if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;                      
    else return false;        
    }
                         
    function grabIt(e) {            
    if(IE) {                            
    whichIt 
    = event.srcElement; 
    while (whichIt.id.indexOf("id2"== -1{    
    whichIt 
    = whichIt.parentElement;                           
    if (whichIt == nullreturn true; }         
     }
                                
    whichIt.style.pixelLeft 
    = whichIt.offsetLeft;                              
    whichIt.style.pixelTop 
    = whichIt.offsetTop;                          
    currentX 
    = (event.clientX + document.body.scrollLeft);                       
    currentY 
    = (event.clientY + document.body.scrollTop);                        
    }
     else {                             
    window.captureEvents(Event.MOUSEMOVE);    
    if(checkFocus (e.pageX,e.pageY)) {                            
    whichIt 
    = document.id2;                              
    stalkerTouchedX 
    = e.pageX-document.id2.pageX;      
    StalkerTouchedY 
    = e.pageY-document.id2.pageY;          
    }
                                  
    }
                                
    return true;                        
    }
                                
    function moveIt(e) {               
    if (whichIt == nullreturn false; }       
    if(IE) {                             
    newX 
    = (event.clientX + document.body.scrollLeft);                           
    newY 
    = (event.clientY + document.body.scrollTop);                
    distanceX 
    = (newX - currentX);    distanceY = (newY - currentY);   
    currentX 
    = newX;    currentY = newY;                       
    whichIt.style.pixelLeft 
    += distanceX;                          
    whichIt.style.pixelTop 
    += distanceY;                      
    if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;   
     
    if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
    if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;  
    event.returnValue 
    = false;  
    }
     else {   
    whichIt.moveTo(e.pageX
    -StalkerTouchedX,e.pageY-StalkerTouchedY); 
    if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; 
    if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;  
    if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17
    if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17
    return false;}
     
    return false;  
    }
       
    function dropIt() {     
    whichIt 
    = null;     
    if(NS) window.releaseEvents (Event.MOUSEMOVE);  
    return true;             
     }
                         
    <!-- DRAG DROP CODE -->  
    if(NS) {    
    window.captureEvents(Event.MOUSEUP
    |Event.MOUSEDOWN);
    window.onmousedown 
    = grabIt;
    window.onmousemove 
    = moveIt; 
    window.onmouseup 
    = dropIt; 
    }
                  
    if(IE) {                     
    document.onmousedown 
    = grabIt;    
    document.onmousemove 
    = moveIt;   
    document.onmouseup 
    = dropIt;          
     }
                             
    if(NS || IE) action = window.setInterval("heartBeat()",1)

    在页面中调用divshow()就可以弹出仿照的模式窗口,这样就不会出现丢失session的问题,而且视觉效果很好。

  • 相关阅读:
    UOJ.26.[IOI2014]Game(交互 思路)
    Good Bye 2016 F.New Year and Finding Roots(交互)
    Codeforces.835E.The penguin's game(交互 按位统计 二分)
    Codeforces.744B.Hongcow's Game(交互 按位统计)
    Codeforces.862D.Mahmoud and Ehab and the binary string(交互 二分)
    正睿OI 提高 Day1T3 ZYB玩字符串(DP)
    划分vlan
    2三层交换机实现vlan间的路由
    交换机基础-交换机远程telnet
    自动化运维环境的搭建问题处理
  • 原文地址:https://www.cnblogs.com/ocean2000/p/776261.html
Copyright © 2011-2022 走看看