点击弹出DIV对话框，实现在对话框打分

<script>

function star_inhtml(b) { var a=b.toString();switch(a){case"1":return"(差)";break;case"2":return"(中)";break;case"3":return"(好)";break;case"4":return"(很好)";break;case"5":return"(非常好)";break;default:break}return""; } function star_get_result(sum) { var avg = parseInt(sum/4); switch(avg) { case 0: r = '差评'; break; case 1: r = '差评'; break; case 2: r = '中评'; break; case 3: r = '好评'; break; case 4: r = '好评'; break; case 5: r = '好评'; break; default: r = '中评'; break; } return r; } function star_result() { var input_1 = parseInt(document.getElementById("dpStar1Hide").value); if (input_1 >0 ) { var sum = input_1; star_get_result(sum); } }  function pingfen(){ var ping= new Ajax(); var tww = parseInt(document.getElementById("dpStar1Hide").value);    ping.get('resource.php?do=resource&ac=pingfen&id=$id&opp='+tww, function(fen){ var mark =fen.split(","); //alert(mark[0]); //alert(mark[1]); alert(fen);        if(mark[0] && mark[1] ){    document.getElementById('marknumberid').innerHTML = mark[0] ; document.getElementById('markpicid').src = 'images/ziyuan/'.mark[1] ;               alert('评分成功');   return false;           }else{             alert('评分不成功'); return false; }    });}function test(){ var tww = parseInt(document.getElementById("dpStar1Hide").value); if(tww==""){ alert('您还没有评分'); return false; } var p_ajax = new Ajax(); var ajaxObj = p_ajax.createXMLHttpRequest(); try{ ajaxObj.open('GET', 'resource.php?do=resource&ac=pingfen&id=$id&opp='+tww, true); ajaxObj.send(null); ajaxObj.onreadystatechange = function(){ if (ajaxObj.readyState == 4) { if(ajaxObj.status == 200){ var mark = ajaxObj.responseText.split(',');//alert(ajaxObj.responseText);          if(ajaxObj.responseText=="no"){
alert("超过了规定周期内的评分次数!");closepop(); return false;                } if(mark[0] && mark[1]){ $('marknumberid').innerHTML = mark[0] ; $('markpicid').src = 'images/ziyuan/'+mark[1] ;   var renm=parseInt($('ren').innerHTML)+1; $('ren').innerHTML=renm;   alert('评分成功!');closepop(); return false; }else{                 alert("系统异常评分失败!");closepop(); return false; }
 } } }; }catch(e){ //alert(e); } } var old_div_className = ""; var old_div_title = ""; function star_aa() { alert("a"); } function star_cli() { this.parentNode.className = "dp-"+this.className+"Level"; document.getElementById(this.parentNode.id+"Txt").innerHTML = star_inhtml(this.className.replace("star","")); old_div_className = this.parentNode.className; old_div_title = document.getElementById(this.parentNode.id+"Txt").innerHTML; document.getElementById(this.parentNode.id+"Hide").value = parseInt(this.className.replace("star","")); star_result(); return false; } function star_mout() { this.parentNode.className = old_div_className; document.getElementById(this.parentNode.id+"Txt").innerHTML = old_div_title; }
function star_mover() { old_div_className = this.parentNode.className; old_div_title = document.getElementById(this.parentNode.id+"Txt").innerHTML; this.parentNode.className = "dp-"+this.className+"Level"; document.getElementById(this.parentNode.id+"Txt").innerHTML = star_inhtml(this.className.replace("star","")); }
function star_init() { var as = document.getElementsByTagName("a"); for(var i=0; i<as.length;i++) { var a = as[i]; if (a.className == "star1" || a.className=="star2" || a.className=="star3"  || a.className =="star4" || a.className == "star5") { star_addEvent(a, "click", star_cli); star_addEvent(a, "mouseout", star_mout); star_addEvent(a, "mouseover", star_mover); } } }function star_addEvent( obj, type, fn ) {      if (obj.addEventListener)          obj.addEventListener( type, fn, false );      else if (obj.attachEvent) {          obj["e"+type+fn] = fn;          obj.attachEvent( "on"+type, function() { obj["e"+type+fn](); } );      } } function star_removeEvent( obj, type, fn ) {      if (obj.removeEventListener)          obj.removeEventListener( type, fn, false );      else if (obj.detachEvent) {          obj.detachEvent( "on"+type, obj["e"+type+fn] );          obj["e"+type+fn] = null;      } } 
function star_addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }}



var W = screen.width;//取得屏幕分辨率宽度var H = screen.height;//取得屏幕分辨率高度
function M(id){    return document.getElementById(id);//用M()方法代替document.getElementById(id)}function MC(t){   return document.createElement(t);//用MC()方法代替document.createElement(t)};//判断浏览器是否为IEfunction isIE(){      return (document.all && window.ActiveXObject && !window.opera) ? true : false;}//取得页面的高宽function getBodySize(){   var bodySize = [];   with(document.documentElement) {    bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度    bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度   }   return bodySize;}//创建遮盖层function popCoverDiv(){   if (M("cover_div")) {   //如果存在遮盖层，则让其显示    M("cover_div").style.display = 'block';   } else {   //否则创建遮盖层    var coverDiv = MC('div');    document.body.appendChild(coverDiv);    coverDiv.id = 'cover_div';    with(coverDiv.style) {     position = 'absolute';     background = '#CCCCCC';     left = '0px';     top = '0px';     var bodySize = getBodySize();     width = bodySize[0] + 'px'     height = bodySize[1] + 'px';     zIndex = 0;     if (isIE()) {      filter = "Alpha(Opacity=60)";//IE逆境     } else {      opacity = 0.6;     }    }   }}//




//让登陆层显示为块    function showLogin()    {                var login=M("login");            login.style.display = "block";        }
//设置DIV层的样式function change(){          var login = M("login");      login.style.position = "absolute";      login.style.border = "10px solid #61c3fc";      login.style.background ="#f9fbff";      var i=0;          var bodySize = getBodySize();      login.style.left = (bodySize[0]-i*i*2)/2+"px";      login.style.top = (bodySize[1]/2-50-i*i)+"px";      login.style.width =      i*i*2 + "px";      login.style.height = i*i*1.1 + "px";          popChange(i);}//让DIV层大小循环增大function popChange(i){      var login = M("login");          var bodySize = getBodySize();      login.style.left = (bodySize[0]-i*i*2)/2+"px";      login.style.top = (bodySize[1]/2-260-i*i)+"px";      login.style.width =      i*i*2 + "px";      login.style.height = i*i*1.1+ "px";      if(i<=10){           i++;           setTimeout("popChange("+i+")",10);//设置超时10毫秒      }}//打开DIV层function openLiuzm(){        change();        showLogin();        popCoverDiv()        void(0);//不进行任何操作,如：<a href="#">aaa</a>}//关闭DIV层function closepop(){         M('login').style.display = 'none';         M("cover_div").style.display = 'none';        void(0);}

</script>

下面是DIV的默认样式

<style>

#dp-star{ color: #111; font: normal normal normal 12px/1.231 SimSun, verdana, arial, helvetica, clean, sans-serif;} #dp-star .dp-item{ position: relative;}.dp-item{float: left; 580px;}.dp-field{float: left;margin: 0px 3px 0px 0px; 106px;}.dp-must{color: #F60;margin-right: 2px;}.dp-lowlight{color: #999;}.dp-field div{background: transparent url(http://k.kbcdn.com/product/huangye/dianping/v2/img/dpFormv2_1_0_1.png) no-repeat 7px -295px;border: 3px solid #FFC990;height: 12px;padding: 5px 0px 5px 6px; 87px;}
.dp-field div a{float: left;height: 12px;padding-left: 3px; 13px;* 15px;}
div {display:block;}div.dp-star1Level{ background-position: 7px -315px;}div.dp-star2Level{ background-position: 7px -335px;}div.dp-star3Level{ background-position: 7px -355px;}div.dp-star4Level{ background-position: 7px -375px;}div.dp-star5Level{ background-position: 7px -395px;}
#dp-level{ display: none; float: left; margin: 0px 3px 0px 0px; 106px;}#dp-level .dp-levelTXT{ background: transparent url(http://k.kbcdn.com/product/huangye/dianping/v2/img/dpFormv2_1_0_1.png) 0px -100px; margin-top: 3px; padding-left: 23px;}#dp-level .dp-levelTXT p{ background: transparent url(http://k.kbcdn.com/product/huangye/dianping/v2/img/dpFormv2_1_0_1.png) 100% -100px; color: #F60; font-family: SimHei, SimSun, verdana; font-size: 20px; padding: 0; 62px; margin: 0;}


   #login{     position: relative;     display: none;         top: 20px;         left: 30px;         background-color: #ffffff;         text-align: center;         border: solid 1px;         padding: 10px;         z-index: 1;   }  

</style>

下面开始构造HTML页面代码

<div id="login">     <div id="panel"> <div id="dp-star" class="dp-group yk-fix-float"><label class="dp-label"></label> <div class="dp-item"> <div class="dp-field">                                 <p><span class="dp-fieldTxt">我要评分</span><span id="dpStar1Txt" class="dp-lowlight"></span></p>                                 <div id="dpStar1" class=""><a class="star1" href="#"></a><a class="star2" href="#"></a><a class="star3" href="#"></a><a class="star4" href="#"></a><a class="star5" href="#"></a></div> <input id="dpStar1Hide" class="dpFieldHide" type="hidden" value="0" name="fuwu"></div> <div id="dp-starHint" style="display: none; ">划过星星并点击选中即可</div> <p id="dp-starError" class="dp-error" style="display: none; "></p> </div> </div>   </div>   <input type="button" onClick="test();" value="提交" class="tijiaodf" />   <input type="button" name="close" onClick="closepop();" value="关闭" class="quxiaodf"/>       </div>