请教一个JS写的点击按钮弹窗，但是内容一多则不正常运行！

<script type="text/javascript" language="javascript">
//more javascript from http://js.5x-space.cn
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height; var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);

var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";    var title=document.createElement("h4");
   title.setAttribute("id","msgTitle");
   title.setAttribute("align","right");
   title.style.margin="0";
   title.style.padding="3px";
   title.style.background=bordercolor;
   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
   title.style.opacity="0.75";
   title.style.border="1px solid " + bordercolor;
   title.style.height="18px";
   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
   title.style.color="white";
   title.style.cursor="pointer";
   title.innerHTML="关闭";
   title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
   document.body.appendChild(msgObj);
   document.getElementById("msgDiv").appendChild(title);
   var txt=document.createElement("p");
   txt.style.margin="1em 0"
   txt.setAttribute("id","msgTxt");
   txt.innerHTML=str;
   document.getElementById("msgDiv").appendChild(txt);
}
</script>
<input type="button" value="点击这里" onclick="sAlert('test弹窗效果');" />

解决方案 »

  1.   

    我的意思是调用参数内容很多，比如这么调用 
    onclick="sAlert('testeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
    则不会弹出窗口了
      

  2.   

    在html中标签属性不要换行写，2个属性之间可以换行
    比如<input type="text" 
    name="txt1" 
    value=""/>
    而不能<input type="te
    xt" 
    name="txt1" 
    value=""/>文本换行是用<br/>
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <script type="text/javascript" language="javascript"> 
    //more javascript from http://js.5x-space.cn 
    function sAlert(str){ 
    var msgw,msgh,bordercolor; 
    msgw=400;//提示窗口的宽度 
    msgh=100;//提示窗口的高度 
    titleheight=25 //提示窗口标题高度 
    bordercolor="#c51100";//提示窗口的边框颜色 
    titlecolor="#c51100";//提示窗口的标题颜色 var sWidth,sHeight; 
    sWidth=screen.width; 
    sHeight=screen.height; var bgObj=document.createElement("div"); 
    bgObj.setAttribute('id','bgDiv'); 
    bgObj.style.position="absolute"; 
    bgObj.style.top="0"; 
    bgObj.style.background="#cccccc"; 
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
    bgObj.style.opacity="0.6"; 
    bgObj.style.left="0"; 
    bgObj.style.width=sWidth + "px"; 
    bgObj.style.height=sHeight + "px"; 
    bgObj.style.zIndex = "10000"; 
    document.body.appendChild(bgObj); var msgObj=document.createElement("div") 
    msgObj.setAttribute("id","msgDiv"); 
    msgObj.setAttribute("align","center"); 
    msgObj.style.background="white"; 
    msgObj.style.border="1px solid " + bordercolor; 
    msgObj.style.position = "absolute"; 
    msgObj.style.left = "50%"; 
    msgObj.style.top = "50%"; 
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
    msgObj.style.marginLeft = "-225px" ; 
    msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
    msgObj.style.width = msgw + "px"; 
    msgObj.style.height =msgh + "px"; 
    msgObj.style.textAlign = "center"; 
    msgObj.style.lineHeight ="25px"; 
    msgObj.style.zIndex = "10001";   var title=document.createElement("h4"); 
      title.setAttribute("id","msgTitle"); 
      title.setAttribute("align","right"); 
      title.style.margin="0"; 
      title.style.padding="3px"; 
      title.style.background=bordercolor; 
      title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
      title.style.opacity="0.75"; 
      title.style.border="1px solid " + bordercolor; 
      title.style.height="18px"; 
      title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
      title.style.color="white"; 
      title.style.cursor="pointer"; 
      title.innerHTML="关闭"; 
      title.onclick=function(){ 
    document.body.removeChild(bgObj); 
    document.getElementById("msgDiv").removeChild(title); 
    document.body.removeChild(msgObj); 
    } 
      document.body.appendChild(msgObj); 
      document.getElementById("msgDiv").appendChild(title); 
      var txt=document.createElement("p"); 
      txt.style.margin="1em 0" 
      txt.setAttribute("id","msgTxt"); 
      txt.innerHTML=str; 
      document.getElementById("msgDiv").appendChild(txt); 
    } </script> </head><body>
    <input type="button" value="点击这里" onclick="sAlert('1eeeeeeeeeeeeeeeeeeeeeeeeeeee<br/>2eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br/>3eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br/>4eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br/>5eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br/>6eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee');" />
    </body></html>