jquery弹出框星型评论

2019独角兽企业重金招聘Python工程师标准>>>

function pinjia(sid,tid) { 
var pin="p_"+sid;
$(document).ready(function () {
 	$('#'+pin).click(function(){
		var box =210;

		var th= $(window).scrollTop()+$(window).height()/1.6-box;
		var h =document.body.clientHeight;
		var rw =$(window).width()/2-box;
		$(".showbox").animate({top:th,opacity:'show',width:360,height:280,right:rw},500);
		$("body").prepend("<div class='mask'></div>");
		$(".mask").css({opacity:"0.5"}).css("height",h);
		return false;
	});

	$(".showbox .close").click(function(){
		$(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
		$(".mask").fadeOut("fast");
	});
var vote;
var options	= {
	max : 5,  
	value   : 1  ,
	image	: '__PUBLIC__/put/rate/star.gif',
	after_click	: function(ret) {
		vote=this.value	= ret.value;
		this.enabled= false;
		$('#rate').rater(this);
	}
 }
$('#rate').rater(options);

/*submit the requrest*/
$('#sub').click(function(){
var message=$("#message").val();
if(vote==null){
	alert("请先评分");
	return false;
}
if(message==""){
	alert("评语不能为空");
	return false;
}
	$.ajax({
   		url:"__APP__/Member/vote",
   		dataType:"json",
   		type:"post",
   		data:"sid="+sid+"&vote="+vote+"&message="+message+"&teacher_id="+tid,
   		success:function(msg){
			if(msg.status==1){
				alert(msg.info);
				window.location.reload(); 
			}
     
   		}
});
	
});	
/

});
}

css

.showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:1px #8FA4F5 solid;padding:1px;background:#fff;}
.showbox h2{height:25px;font-size:14px;background-color:#3366cc;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.showbox h2 a{position:absolute;right:5px;top:0;font-size:12px;color:#fff;}
.showbox .mainlist{padding:10px;}

.showbox .mainlist li{height:24px;line-height:24px;}

.showbox .mainlist li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.showbox .mainlist li a{font-size:12px;}
.mask{background:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;}

html:

<div id="box" style="display:none;float:left;text-align:left;" class="showbox">
<h2>对老师评价<a class="close" href="#" target="_self">关闭</a></h2>

<ul>
  <li style="float:left;text-align:left;height:45px;padding:5px 0 0 15px;"><font size="2px">给老师评分：</font>  
		<div id="rate" ></div>
</li>
  <li style="float:left;text-align:left;padding:5px 0 0 15px;"><font size="2px">老师的发音：
    <input type="radio" name="rad" id="radio" value="radio" />很好
    <input type="radio" name="rad" id="radio" value="radio" />好
    <input type="radio" name="rad" id="radio" value="radio" />一般
    <input type="radio" name="rad" id="radio" value="radio" />差
    <input type="radio" name="rad" id="radio" value="radio" />很差
  </font></li><br>
  <li style="float:left;text-align:left;padding:5px 0 0 15px;"><font size="2px">老师的态度：
      <input type="radio" name="radio" id="radio" value="radio" />很好
    <input type="radio" name="radio" id="radio" value="radio" />好
    <input type="radio" name="radio" id="radio" value="radio" />一般
    <input type="radio" name="radio" id="radio" value="radio" />差
    <input type="radio" name="radio" id="radio" value="radio" />很差
  </font></li>
<br>
 <li style="float:left;text-align:left;padding:5px 0 0 15px;">评语：<textarea name="message" id="message" rows="5" cols="40"></textarea></li>
  </ul>
  <a style="display:block; margin-top:5px;" href="#" target="_self" id="sub"><img src="__PUBLIC__/put/images/sub.png"></a>
  
  
  </div>

转载于:https://my.oschina.net/mickelfeng/blog/89587