【求助】js在html中运行成功，可是不会放到外部文件中！

这段js在html中运行成功，但是放到了外部中就出错了，大概是我不会放吧。
请高手指点！！<!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>JavaScript 仿LightBox内容显示效果</title>
</head><body><br /><br /><br /><br /><script>var isIE = (document.all) ? true : false;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() { this.initialize.apply(this, arguments); }
}
}var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}var Each = function(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};var Contains = function(a, b){
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
var OverLay = Class.create();
OverLay.prototype = {
  initialize: function(options) { this.SetOptions(options);

this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);

this.Color = this.options.Color;
this.Opacity = parseInt(this.options.Opacity);
this.zIndex = parseInt(this.options.zIndex);

with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; }

if(isIE6){
this.Lay.style.position = "absolute";
//ie6设置覆盖层大小程序
this._resize = Bind(this, function(){
this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
});
//遮盖select
this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'
}
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
Lay: null,//覆盖层对象
Color: "#fff",//背景色
Opacity: 50,//透明度(0-100)
zIndex: 1000//层叠顺序
    };
    Extend(this.options, options || {});
  },
  //显示
  Show: function() {
//兼容ie6
if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); }
//设置样式
with(this.Lay.style){
//设置透明度
isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;
backgroundColor = this.Color; display = "block";
}
  },
  //关闭
  Close: function() {
this.Lay.style.display = "none";
if(isIE6){ window.detachEvent("onresize", this._resize); }
  }
};var LightBox = Class.create();
LightBox.prototype = {
  initialize: function(box, options) {

this.Box = $(box);//显示层

this.OverLay = new OverLay(options);//覆盖层

this.SetOptions(options);

this.Fixed = !!this.options.Fixed;
this.Over = !!this.options.Over;
this.Center = !!this.options.Center;
this.onShow = this.options.onShow;

this.Box.style.zIndex = this.OverLay.zIndex + 1;
this.Box.style.display = "none";

//兼容ie6用的属性
if(isIE6){
this._top = this._left = 0; this._select = [];
this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });
}
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
Over: true,//是否显示覆盖层
Fixed: false,//是否固定定位
Center: false,//是否居中
onShow: function(){}//显示时执行
};
    Extend(this.options, options || {});
  },
  //兼容ie6的固定定位程序
  SetFixed: function(){
this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px";
this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";

this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
  },
  //兼容ie6的居中定位程序
  SetCenter: function(){
this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";
  },
  //显示
  Show: function(options) {
//固定定位
this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute"; //覆盖层
this.Over && this.OverLay.Show();

this.Box.style.display = "block";

//居中
if(this.Center){
this.Box.style.top = this.Box.style.left = "50%";
//设置margin
if(this.Fixed){
this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
}else{
this.SetCenter();
}
}

//兼容ie6
if(isIE6){
if(!this.Over){
//没有覆盖层ie6需要把不在Box上的select隐藏
this._select.length = 0;
Each(document.getElementsByTagName("select"), Bind(this, function(o){
if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); }
}))
}
//设置显示位置
this.Center ? this.SetCenter() : this.Fixed && this.SetFixed();
//设置定位
this.Fixed && window.attachEvent("onscroll", this._fixed);
}

this.onShow();
  },
  //关闭
  Close: function() {
this.Box.style.display = "none";
this.OverLay.Close();
if(isIE6){
window.detachEvent("onscroll", this._fixed);
Each(this._select, function(o){ o.style.visibility = "visible"; });
}
  }
};</script><style>
.lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}
.lightbox dt{background:#f4f4f4; padding:5px;}
</style><dl id="idBox" class="lightbox">
  <dt id="idBoxHead"><b>LightBox</b> </dt>
  <dd>
    内容显示
    <br /><br />
    <input name="" type="button" value=" 关闭 " id="idBoxCancel" />
    <br /><br />  </dd>
</dl>
<div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;"><input type="button" value="关闭覆盖层" id="btnOverlay" />
<input type="button" value="黑色覆盖层" id="btnOverColor" />
<input type="button" value="全透覆盖层" id="btnOverOpacity" />
<input type="button" value="定位效果" id="btnFixed" />
<input type="button" value="居中效果" id="btnCenter" />
<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 />
<select>
<option>覆盖select测试</option>
</select> <input name="" type="button" value=" 打开 " id="idBoxOpen" /></div><script>var box = new LightBox("idBox");$("idBoxCancel").onclick = function(){ box.Close(); }
$("idBoxOpen").onclick = function(){ box.Show(); }$("btnOverlay").onclick = function(){
box.Close();
if(box.Over){
box.Over = false;
this.value = "打开覆盖层";
} else {
box.Over = true;
this.value = "关闭覆盖层";
}
}$("btnOverColor").onclick = function(){
box.Close();
box.Over = true;
if(box.OverLay.Color == "#fff"){
box.OverLay.Color = "#000";
this.value = "白色覆盖层";
} else {
box.OverLay.Color = "#fff"
this.value = "黑色覆盖层";
}
}$("btnOverOpacity").onclick = function(){
box.Close();
box.Over = true;
if(box.OverLay.Opacity == 0){
box.OverLay.Opacity = 50;
this.value = "全透覆盖层";
} else {
box.OverLay.Opacity = 0;
this.value = "半透覆盖层";
}
}$("btnFixed").onclick = function(){
box.Close();
if(box.Fixed){
box.Fixed = false;
this.value = "定位效果";
} else {
box.Fixed = true;
this.value = "取消定位";
}
}$("btnCenter").onclick = function(){
box.Close();
if(box.Center){
box.Center = false;
box.Box.style.left = box.Box.style.top = "20%";
box.Box.style.marginTop = box.Box.style.marginLeft = "0";
this.value = "居中效果";
} else {
box.Center = true;
this.value = "重新定位";
}
}
</script></body>
</html>

解决方案 »

  1.   

    那你是怎么样放到外部的js文件中呢，另外最好把要跟dom打交道的代码都写在一个大大的$(function(){///here///})  里面
      

  2.   

    你得把js代码抽取出来放到一个js文件中
    然后用<script src="your.js"></script>加载到需要用的页面中
      

  3.   


    <!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>JavaScript 仿LightBox内容显示效果</title>
    </head><body>
    <script  type="text/javascript" src="1.js"></script><br /><br /><br /><br /><style>
    .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}
    .lightbox dt{background:#f4f4f4; padding:5px;}
    </style><dl id="idBox" class="lightbox">
      <dt id="idBoxHead"><b>LightBox</b> </dt>
      <dd>
        内容显示
        <br /><br />
        <input name="" type="button" value=" 关闭 " id="idBoxCancel" />
        <br /><br />  </dd>
    </dl>
    <div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;"><input type="button" value="关闭覆盖层" id="btnOverlay" />
    <input type="button" value="黑色覆盖层" id="btnOverColor" />
    <input type="button" value="全透覆盖层" id="btnOverOpacity" />
    <input type="button" value="定位效果" id="btnFixed" />
    <input type="button" value="居中效果" id="btnCenter" />
    <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 />
    <select>
    <option>覆盖select测试</option>
    </select> <input name="" type="button" value=" 打开 " id="idBoxOpen" /></div><script  type="text/javascript" src="2.js"></script></body>
    </html>1.js
    var isIE = (document.all) ? true : false;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };var Class = {
        create: function() {
            return function() { this.initialize.apply(this, arguments); }
        }
    }var Extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }var Bind = function(object, fun) {
        return function() {
            return fun.apply(object, arguments);
        }
    }var Each = function(list, fun){
        for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
    };var Contains = function(a, b){
        return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
    }
    var OverLay = Class.create();
    OverLay.prototype = {
      initialize: function(options) {    this.SetOptions(options);
        
        this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
        
        this.Color = this.options.Color;
        this.Opacity = parseInt(this.options.Opacity);
        this.zIndex = parseInt(this.options.zIndex);
        
        with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; }
        
        if(isIE6){
            this.Lay.style.position = "absolute";
            //ie6设置覆盖层大小程序
            this._resize = Bind(this, function(){
                this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
                this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
            });
            //遮盖select
            this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'
        }
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
            Lay:        null,//覆盖层对象
            Color:        "#fff",//背景色
            Opacity:    50,//透明度(0-100)
            zIndex:        1000//层叠顺序
        };
        Extend(this.options, options || {});
      },
      //显示
      Show: function() {
        //兼容ie6
        if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); }
        //设置样式
        with(this.Lay.style){
            //设置透明度
            isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;
            backgroundColor = this.Color; display = "block";
        }
      },
      //关闭
      Close: function() {
        this.Lay.style.display = "none";
        if(isIE6){ window.detachEvent("onresize", this._resize); }
      }
    };var LightBox = Class.create();
    LightBox.prototype = {
      initialize: function(box, options) {
        
        this.Box = $(box);//显示层
        
        this.OverLay = new OverLay(options);//覆盖层
        
        this.SetOptions(options);
        
        this.Fixed = !!this.options.Fixed;
        this.Over = !!this.options.Over;
        this.Center = !!this.options.Center;
        this.onShow = this.options.onShow;
        
        this.Box.style.zIndex = this.OverLay.zIndex + 1;
        this.Box.style.display = "none";
        
        //兼容ie6用的属性
        if(isIE6){
            this._top = this._left = 0; this._select = [];
            this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });
        }
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
            Over:    true,//是否显示覆盖层
            Fixed:    false,//是否固定定位
            Center:    false,//是否居中
            onShow:    function(){}//显示时执行
        };
        Extend(this.options, options || {});
      },
      //兼容ie6的固定定位程序
      SetFixed: function(){
        this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px";
        this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";
        
        this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
      },
      //兼容ie6的居中定位程序
      SetCenter: function(){
        this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";
        this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";
      },
      //显示
      Show: function(options) {
        //固定定位
        this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute";    //覆盖层
        this.Over && this.OverLay.Show();
        
        this.Box.style.display = "block";
        
        //居中
        if(this.Center){
            this.Box.style.top = this.Box.style.left = "50%";
            //设置margin
            if(this.Fixed){
                this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
                this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
            }else{
                this.SetCenter();
            }
        }
        
        //兼容ie6
        if(isIE6){
            if(!this.Over){
                //没有覆盖层ie6需要把不在Box上的select隐藏
                this._select.length = 0;
                Each(document.getElementsByTagName("select"), Bind(this, function(o){
                    if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); }
                }))
            }
            //设置显示位置
            this.Center ? this.SetCenter() : this.Fixed && this.SetFixed();
            //设置定位
            this.Fixed && window.attachEvent("onscroll", this._fixed);
        }
        
        this.onShow();
      },
      //关闭
      Close: function() {
        this.Box.style.display = "none";
        this.OverLay.Close();
        if(isIE6){
            window.detachEvent("onscroll", this._fixed);
            Each(this._select, function(o){ o.style.visibility = "visible"; });
        }
      }
    };2.js
    var box = new LightBox("idBox");$("idBoxCancel").onclick = function(){ box.Close(); }
    $("idBoxOpen").onclick = function(){ box.Show(); }$("btnOverlay").onclick = function(){
        box.Close();
        if(box.Over){
            box.Over = false;
            this.value = "打开覆盖层";
        } else {
            box.Over = true;
            this.value = "关闭覆盖层";
        }
    }$("btnOverColor").onclick = function(){
        box.Close();
        box.Over = true;
        if(box.OverLay.Color == "#fff"){
            box.OverLay.Color = "#000";
            this.value = "白色覆盖层";
        } else {
            box.OverLay.Color = "#fff"
            this.value = "黑色覆盖层";
        }
    }$("btnOverOpacity").onclick = function(){
        box.Close();
        box.Over = true;
        if(box.OverLay.Opacity == 0){
            box.OverLay.Opacity = 50;
            this.value = "全透覆盖层";
        } else {
            box.OverLay.Opacity = 0;
            this.value = "半透覆盖层";
        }
    }$("btnFixed").onclick = function(){
        box.Close();
        if(box.Fixed){
            box.Fixed = false;
            this.value = "定位效果";
        } else {
            box.Fixed = true;
            this.value = "取消定位";
        }
    }$("btnCenter").onclick = function(){
        box.Close();
        if(box.Center){
            box.Center = false;
            box.Box.style.left = box.Box.style.top = "20%";
            box.Box.style.marginTop = box.Box.style.marginLeft = "0";
            this.value = "居中效果";
        } else {
            box.Center = true;
            this.value = "重新定位";
        }
    }
    和加载的顺序有关，你肯定是把两个JS都放到最上面了