弹出一个窗口（页面）问题。

现在很多网页弹出一个点击弹出一个小页面，然后父窗口整个变黑，只能操作当前这个小页面，这个功能是什么技术，是JS吗，怎么做？要实例，谢谢。

解决方案 »

  1.   


    <!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>
      <title> LightBox </title>
      <style type="text/css">
      #box {
        text-align:right;
        background-color: #fff;
        border: 20px solid #000000;
      }
      </style>
     </head>
     <body>
     <script type="text/javascript">
     <!--
        var $ = function(id){
            return 'string' == typeof id ? document.getElementById(id) : id;
        }    var $d = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;    var isIE = navigator.userAgent.indexOf('MSIE') != -1;
        var isIE6 = navigator.userAgent.indexOf('MSIE 6.0') != -1;
        isIE6 && document.execCommand('BackgroundImageCache', false, true);    var Extend = function(destination, source){
            for(var pro in source){
                destination[pro] = source[pro];
            }
            return destination;
        }    function addEvent(oTarget, sType, fnHandler){
            if(window.attachEvent){
                oTarget.attachEvent("on"+sType, fnHandler);
            }else if(window.addEventListener){
                oTarget.addEventListener(sType, fnHandler, false);
            }else{
                oTarget["on"+sType] = fnHandler;
            }
        }    function removeEvent(oTarget, sType, fnHandler){
            if(window.detachEvent){
                oTarget.detachEvent("on"+sType, fnHandler);
            }else if(window.removeEventListener){
                oTarget.removeEventListener(sType, fnHandler, false);
            }else{
                oTarget["on"+sType] = null;
            }
        }    function setOpacity(obj, o){
            if(!obj.currentStyle || !obj.currentStyle.hasLayout) obj.style.zoom = 1;
            if(!!isIE)obj.style.filter = 'alpha(opacity=' + Math.round(o) + ')';
            else obj.style.opacity = o / 100;
        }    var Bind = function(object, fun){
            return function(){
                fun.apply(object, arguments);
            }
        }    var Class = {
            create: function(){
                return function(){
                    this.initialize.apply(this, arguments);
                }
            }
        }    var OverLay = Class.create();
        OverLay.prototype = {
            initialize: function(options){
                this.SetOptions(options);
                Extend(this, this.options);
                this.Lay = document.body.insertBefore(document.createElement('div'), document.body.childNodes[0]);
                with(this.Lay.style){
                    position = 'fixed';left = top = '0px';width = height = '100%';zIndex = parseInt(this.zIndex);
                    backgroundColor = this.bgColor;display = 'none';
                }
                if(isIE6){
                    this.Lay.style.position = 'absolute';
                    this._resize = Bind(this, function(){
                        this.Lay.style.width = Math.max($d.clientWidth, $d.scrollWidth) + "px";
                        this.Lay.style.height = Math.max($d.clientHeight, $d.scrollHeight) + "px";
                    });
                    this.Lay.innerHTML += "<iframe style='position:absolute;left:0px;top:0px;widht:100%;height:100%;filter:alpha(opacity=0);z-index:-1'></iframe>";
                }
            },        Show: function(){
                if(isIE6){this._resize();addEvent(window,'resize',Bind(this, this._resize))};
                setOpacity(this.Lay, this.opacity);
                this.Lay.style.display = "block";                    
            },        SetOptions: function(options){
                this.options = {
                    bgColor: "#000000",
                    opacity: 80,
                    zIndex: 1000
                };
                Extend(this.options, options || {});
            },        Close: function(){            
                this.Lay.style.display = "none";
                isIE6 && removeEvent(window,'resize',Bind(this,this._resize));
            }
        }    var LightBox = Class.create();
        LightBox.prototype = {
            initialize: function(boxId, options){
                this.Box = $(boxId);
                this.Lay = new OverLay();
                this.SetOptions(options);
                Extend(this, this.options);            this.Box.style.display = "none";
                this.Box.style.zIndex = parseInt(this.Lay.zIndex) + 1;
                if(isIE6){
                    this._top = this._left = 0; 
                    this._fixed = Bind(this, function(){ this.isCenter ? this.SetCenter() : this.FixScroll(); });
                }
            },        SetCenter: function(){
                this.Box.style.marginLeft = $d.scrollLeft - this.Box.offsetWidth / 2 + "px";
                this.Box.style.marginTop = $d.scrollTop  - this.Box.offsetHeight / 2 + "px";
            },        FixScroll: function(){
                this.Box.style.top = $d.scrollTop - this._top + this.Box.offsetTop + "px";
                this.Box.style.left = $d.scrollLeft - this._left + this.Box.offsetLeft + "px";
                this._top = $d.scrollTop; this._left = $d.scrollLeft;
            },        Show: function(){
                this.hasLayer && this.Lay.Show();
                this.Box.style.position = this.isScroll && !isIE6 ? 'fixed' : 'absolute';    
                this.Box.style.display = "block";
                if(this.isCenter){
                    this.Box.style.left = "50%"; this.Box.style.top = "50%";
                    if(this.isScroll){
                        this.Box.style.marginLeft = -this.Box.offsetWidth / 2 + "px";
                        this.Box.style.marginTop =  - this.Box.offsetHeight / 2 + "px";
                    }else {
                        this.SetCenter();
                    }
                }else{
                    this.Box.style.left = "20%"; this.Box.style.top = "10%";
                }
                if(isIE6){
                    this.isCenter ? this.SetCenter() : this.isScroll && this.FixScroll();
                    this.isScroll && addEvent(window,'scroll',this._fixed);        
                }        },        SetOptions: function(options){
                this.options = {
                    hasLayer: true,
                    isCenter: true,
                    isScroll: true
                };
                Extend(this.options, options || {});
            },        Close: function(){
                this.Box.style.display = "none";
                this.Lay.Close();
            }
        }
     //-->
     </script>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <div id="openbtn"><img src="http://images.cnblogs.com/cnblogs_com/s_liangchao1s/201609/o_28t.jpg"/></div>
      <div id="box">
        <img src="http://images.cnblogs.com/cnblogs_com/s_liangchao1s/201609/o_28.jpg"/></br>
        <span id="clobtn">
            <img src='http://images.cnblogs.com/cnblogs_com/s_liangchao1s/201609/o_closelabel.gif'/>
        </span>
      </div>
     <select style="width:100px;">
        <option value="" selected="selected">Test IE6</option>
     </select>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <script type="text/javascript">
      <!--
        var box = new LightBox('box');
        $('openbtn').onclick = function(){
            box.Show();
        }
        $('clobtn').onclick = function(){
            box.Close();
        }  //-->
      </script>
     </body>
    </html>// 参考一下
      

  2.   

    实例在项目里不好找,原理和你说下:
    创建一个全窗口的DIV,设置颜色,透明度.Z-INDEX设为当前最高的.如998;再创建一个当前应用的DIV,Z-INDEX设为999
      

  3.   


    <script type="text/javascript">
        var docEle = function()
        {
            return document.getElementById(arguments[0]) || false;
        }    function openNewDiv(_id)
        {
            var m = "mask";
            if (docEle(_id)) document.body.removeChild(docEle(_id));
            if (docEle(m)) document.body.removeChild(docEle(m));        //mask遮罩层        var newMask = document.createElement("div");
            newMask.id = m;
            newMask.style.position = "absolute";
            newMask.style.zIndex = "1";
            _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
            _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
            newMask.style.width = _scrollWidth + "px";
            newMask.style.height = _scrollHeight + "px";
            newMask.style.top = "0px";
            newMask.style.left = "0px";
            newMask.style.background = "#33393C";
            newMask.style.filter = "alpha(opacity=40)";
            newMask.style.opacity = "0.40";
            document.body.appendChild(newMask);        //新弹出层        var newDiv = document.createElement("div");
            newDiv.id = _id;
            newDiv.style.position = "absolute";
            newDiv.style.zIndex = "9999";
            newDivWidth = 400;
            newDivHeight = 200;
            newDiv.style.width = newDivWidth + "px";
            newDiv.style.height = newDivHeight + "px";
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
            newDiv.style.background = "#EFEFEF";
            newDiv.style.border = "1px solid #860001";
            newDiv.style.padding = "5px";
            newDiv.innerHTML = " ";
            document.body.appendChild(newDiv);        //弹出层滚动居中        function newDivCenter()
            {
                newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
                newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
            }
            if(document.all)
            {
                window.attachEvent("onscroll",newDivCenter);
            }
            else
            {
                window.addEventListener('scroll',newDivCenter,false);
            }        //关闭新图层和mask遮罩层
            var newA = document.createElement("div");
            newA.innerHTML ="取消";
            var newB = document.createElement("TEXTAREA");
            newB.setAttribute("cols","40");
            newB.setAttribute("rows","10");
            newA.onclick = function(){
                if(document.all)
                {
                    window.detachEvent("onscroll",newDivCenter);
                }
                else
                {
                    window.removeEventListener('scroll',newDivCenter,false);
                }
                document.body.removeChild(docEle(_id));
                document.body.removeChild(docEle(m));
                return false;
            }
            newDiv.appendChild(newB);
            newDiv.appendChild(newA);
        }
    </script>
    <body>    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>
    </body>
      

  4.   

    弹出的是div,弹出后缩定当前页.用的是html 和js技术.
    现在能实现这项技术,并且比较成熟的开元ajax技术,我知道的是extjs
      

  5.   

    这两个都不错，不过我打开的是一个链接，一个带参数的链接，如aaa.asp?id=100
      

  6.   


    <div id="openbtn"><img src="http://images.cnblogs.com/cnblogs_com/s_liangchao1s/201609/o_28t.jpg"/></div>
    =====================换成
    <a href="#" id="openbtn"> ok </a>
      

  7.   


    <script type="text/javascript">
        var docEle = function()
        {
            return document.getElementById(arguments[0]) || false;
        }    function openNewDiv(_id)
        {
            var m = "mask";
            if (docEle(_id)) document.body.removeChild(docEle(_id));
            if (docEle(m)) document.body.removeChild(docEle(m));        //mask遮罩层        var newMask = document.createElement("div");
            newMask.id = m;
            newMask.style.position = "absolute";
            newMask.style.zIndex = "1";
            _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
            _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
            newMask.style.width = _scrollWidth + "px";
            newMask.style.height = _scrollHeight + "px";
            newMask.style.top = "0px";
            newMask.style.left = "0px";
            newMask.style.background = "#33393C";
            newMask.style.filter = "alpha(opacity=40)";
            newMask.style.opacity = "0.40";
            document.body.appendChild(newMask);        //新弹出层        var newDiv = document.createElement("div");
            newDiv.id = _id;
            newDiv.style.position = "absolute";
            newDiv.style.zIndex = "9999";
            newDivWidth = 400;
            newDivHeight = 200;
            newDiv.style.width = newDivWidth + "px";
            newDiv.style.height = newDivHeight + "px";
            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
            newDiv.style.background = "#EFEFEF";
            newDiv.style.border = "1px solid #860001";
            newDiv.style.padding = "5px";
            newDiv.innerHTML = " ";
            document.body.appendChild(newDiv);        //弹出层滚动居中        function newDivCenter()
            {
                newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
                newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
            }
            if(document.all)
            {
                window.attachEvent("onscroll",newDivCenter);
            }
            else
            {
                window.addEventListener('scroll',newDivCenter,false);
            }        //关闭新图层和mask遮罩层
            var newA = document.createElement("div");
            newA.innerHTML ="取消";
            var newB = document.createElement("iframe");
            newB.setAttribute("src","http://www.baidu.com");
            newA.onclick = function(){
                if(document.all)
                {
                    window.detachEvent("onscroll",newDivCenter);
                }
                else
                {
                    window.removeEventListener('scroll',newDivCenter,false);
                }
                document.body.removeChild(docEle(_id));
                document.body.removeChild(docEle(m));
                return false;
            }
            newDiv.appendChild(newB);
            newDiv.appendChild(newA);
        }
    </script>
    <body>    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>
    </body>
      

  8.   

     newB.setAttribute("src","http://www.baidu.com");帮我写个取参数的句子吧，谢谢。如http://www.baidu.com/123.asp?id=<%=id%>这个语法不会弄。
      

  9.   

    newB.setAttribute("src","http://www.baidu.com/123.asp?id='"+id+"'"); 
      

  10.   

    id 需要在js里声明一下，怎么弄啊。
      

  11.   

    function aa(id){
    newB.setAttribute("src","http://www.baidu.com/123.asp?id='"+id+"'"); 
    };<body onload="aa('"+<%=rs(id)>+"')">
      

  12.   

    这是Ajax技术+jQuery技术  去这些网站看看  这个例子很经典 
      

  13.   

    还是弄不明白那个 <%=rs("id")%>怎么弄过来。
      

  14.   

    先获得这个视口的大小，然后在生成一个div，div的样式lz根据需要自己生成，我把如何确定视口大小的函数贴出来，自己生成div的添加部分就可以了<script type="text/javascript">  
    function getViewportInfo() 
    { 
    var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth; 
    var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight; 
    return {w:w,h:h}; 
    }; 
    </script> lz