我这里有个弹出层效果,但是弹出层随着滚动条往下滚动,想要一个不滚动的,哪位大侠给改一下,留下联系方式,我给您发过去,十分感谢

解决方案 »

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/thickbox_plus.js"></script>
    <link rel="stylesheet" type="text/css" href="css/thickbox.css"/>
    </head>
    <body>
    <a href="ShowLogin.html?height=460;width=500" title="应聘该职位并投递简历" class="thickbox" >马上应聘该职位</a></body>
    </html>
    thickbox_plus.js内容:
    $(document).ready(TB_launch); // function for adding Thickbox to elements of class .thickbox
    // wrapped by Christian Montoya for uses other than $(document).ready
    function TB_launch() {
    $("a.thickbox").click(function(){
      var t = this.title;
      TB_show(t,this.href);
      this.blur();
      return false;
    });
    }function TB_show(caption, url) { //function called when the user clicks on a thickbox link
    try {
    $("body")
    .append("<div id='TB_overlay'></div><div id='TB_window'></div>");
    $("#TB_overlay").css("opacity","0.6");
    $("#TB_overlay").css("filter","alpha(opacity=60)");
    $("#TB_overlay").css("-moz-opacity","0.6");
    $(window).resize(TB_position);
    $("body").append("<div id='TB_load'><div id='TB_loadContent'><img src='images/circle_animation.gif' /></div></div>");
    $("#TB_overlay").show();
    var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm/g;
    var urlType = url.match(urlString);

    if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images var imgPreloader = new Image();
    imgPreloader.onload = function(){ // Resizing large images added by Christian Montoya
    var de = document.documentElement;
    var x = (self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth) - 50;
    var y = (self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight) - 80;
    if(imgPreloader.width > x) { 
    imgPreloader.height = imgPreloader.height * (x/imgPreloader.width); 
    imgPreloader.width = x; 
    if(imgPreloader.height > y) { 
    imgPreloader.width = imgPreloader.width * (y/imgPreloader.height); 
    imgPreloader.height = y; 
    }

    else if(imgPreloader.height > y) { 
    imgPreloader.width = imgPreloader.width * (y/imgPreloader.height); 
    imgPreloader.height = y; 
    if(imgPreloader.width > x) { 
    imgPreloader.height = imgPreloader.height * (x/imgPreloader.width); 
    imgPreloader.width = x;
    }
    }
    // End Resizing TB_WIDTH = imgPreloader.width + 30;
    TB_HEIGHT = imgPreloader.height + 60;
    $("#TB_window").append("<img id='TB_Image' src='"+url+"' width='"+imgPreloader.width+"' height='"+imgPreloader.height+"' alt='"+caption+"'/>"+ "<div id='TB_caption'>"+caption+"</div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>关闭</a></div>"); 
    $("#TB_closeWindowButton").click(TB_remove);
    $("#TB_Image").click(TB_remove); // close when image clicked added by Christian Montoya
    TB_position();
    $("#TB_load").remove();
    $("#TB_window").slideDown("normal");
    }
      
    imgPreloader.src = url;
    }

    if(urlType == '.htm' || urlType == '.html'){//code to show html pages

    var queryString = url.replace(/^[^\?]+\??/,'');
    var params = parseQuery( queryString );

    TB_WIDTH = (params['width']*1) + 30;
    TB_HEIGHT = (params['height']*1) + 40;
    ajaxContentW = TB_WIDTH - 30;
    ajaxContentH = TB_HEIGHT - 45;
    $("#TB_window").append("<div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>关闭</a></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
    $("#TB_closeWindowButton").click(TB_remove);
    $("#TB_ajaxContent").load(url, function(){
    TB_position();
    $("#TB_load").remove();
    $("#TB_window").slideDown("normal");
    });
    }

    } catch(e) {
    alert( e );
    }
    }//helper functions belowfunction TB_remove() {
    // #TB_load removal added by Christian Montoya; solves bug when overlay is closed before image loads
    $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_load').remove();}); 
    return false;
    }function TB_position() {
    var de = document.documentElement;
    var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
    var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
      
       if (window.innerHeight && window.scrollMaxY) {
    yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    yScroll = document.body.offsetHeight;
       }

    $("#TB_window").css({width:TB_WIDTH+"px",height:TB_HEIGHT+"px",
    left: ((w - TB_WIDTH)/2)+"px", top: ((h - TB_HEIGHT)/2)+"px" });
    $("#TB_overlay").css("height",yScroll +"px");
    }function parseQuery ( query ) {
       var Params = new Object ();
       if ( ! query ) return Params; // return empty object
       var Pairs = query.split(/[;&]/);
       for ( var i = 0; i < Pairs.length; i++ ) {
          var KeyVal = Pairs[i].split('=');
          if ( ! KeyVal || KeyVal.length != 2 ) continue;
          var key = unescape( KeyVal[0] );
          var val = unescape( KeyVal[1] );
          val = val.replace(/\+/g, ' ');
          Params[key] = val;
       }
       return Params;
    }
    css样式:
    body {background-color:#fff;}
    html, body {height:100%;}
    html body{font:12px Arial, Helvetica, sans-serif;color:#333333}
    html>body{font:12px Arial, Helvetica, sans-serif;color:#333333}
    #TB_overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
    width: 100%;
    height: 100%;
    background-color:#CCC;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }
    #TB_window {
    top: 0px;
    left: 0px;
    position: fixed;
    _position: absolute;
    background: #fff;
    z-index: 102;
    color:#000000;
    display:none;
    border:5px solid #666;
    }
    #TB_caption{
    height:25px;
    padding:10px 30px 10px 25px;
    }
    #TB_closeWindow{
    height:25px;
    padding:10px 25px 10px 0;
    float:right;
    }
    #TB_closeAjaxWindow{
    padding:5px 10px 7px 0;
    margin-bottom:1px;
    text-align:right;
    background-color:#e8e8e8;
    }
    #TB_ajaxContent{
    padding:2px 15px 15px 15px;
    overflow:auto;
    }#TB_load{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    overflow: visible;
    visibility: visible;
    display: block;
    z-index:101;
    }
    #TB_loadContent{
    margin-left: -125px;
    position: absolute;
    top: -50px;
    left: 50%;
    width: 250px;
    height: 100px;
    visibility: visible;
    }
      

  2.   

    修改好的话,可以发到[email protected]十分感谢
      

  3.   

    是不是要绝对居中啊。要监听滚动条事件,弹出层的top值变化就行了
      

  4.   

    直接将定位positon: "absolute"替换成"fixed"。