前

篇是第一部分，那么接下来是第二部分。为了让回复评论的过程更清晰简洁又具有良好的适应性，下面这个方法是自定义一个引用回复表单，引用要回复的评论并且让它出现在原评论表单里面，这样我们就不用移动原来的评论表单，与此同时也能获得较好的响应式回复区域。

步骤一

当然是先在原评论表单的div内插入一个自定义回复表单的div，结构如下：

<div id="reply-box">
<div class="r-inbox top">
<div class="arrow"></div>
<h3 class="r-inbox-title"><span id="reply-text">回复</span> <span id="reply-name"></span><a id="r-close" href="javascript:;">取消</a></h3>
<div class="r-inbox-content" id="reply-content"></div>
</div>
</div>

步骤二

为上面自定义的回复表单添加相应的CSS，这个也要根据个人主题布局以及评论表单不同而进行细微的调整：

#reply-box{display:none;margin:60px 0 10px;position:relative}
#reply-box .r-inbox{margin-left:25px;width:90%;max-width:780px;position:relative;display:block}
.r-inbox{position:absolute;top:0;left:0;z-index:1010;display:none;max-width:276px;padding:1px;text-align:left;background-color:#fff;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);white-space:normal}
.r-inbox-title{margin:0;padding:8px 14px;font-size:14px;font-weight:normal;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}
.r-inbox .arrow,.r-inbox .arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}
.r-inbox .arrow{border-width:11px;left: 50%;margin-left:-11px;border-bottom-width:0px;border-top-color:rgba(0, 0, 0, 0.25);bottom:-11px;}
.r-inbox .arrow:after{border-width:10px;content:""; bottom:1px;margin-left: -10px;border-bottom-width: 0px;border-top-color: #FFF;}
.r-inbox-content{padding:9px 14px}
#reply-name{color:#428bca}
#r-close{position:absolute;right:15px;color:#666}
#r-close:hover{color:#428bca}
#reply-content{line-height:22px}

步骤三

执行点击回复显示回复表单、点击取消隐藏表单的JS，需要jQuery库的支持，具体代码如下（我按自己的理解做了简单的注释，也许不一定对，将就着自己能看懂那个意思即可）：

$(".comment-reply-link").live("click", // 点击回复按钮
function() {
var parent_id = $(this).attr('href').match(/(\d+)#/); //变量：父级id链接
var parents = $(this).parents('li'); //变量：父级列表li
var name = parents.children('.cl-main').find('.cl-author').html(); //变量：子级id或类，找到被回复人的名称id或类
var content = parents.find('.cl-content').html(); //变量：找到父级评论的内容主体
$('#comment_parent').val(parent_id[1]); // 将回复作为子级插入父级之下
$('#reply-name').html(name); // 替换姓名
$('#reply-content').html(content); // 替换内容
$('#reply-box').fadeIn('normal'); // 引用表单淡入
$('#reply-text').html($(this).text()); // 回复二字
$('body,html').animate({ scrollTop: $('#reply-box').offset().top}, 400); // 定位返回至回复表单
return false;
});
$("#r-close").live("click", // 点击取消按钮
function() {
$('#reply-box').fadeOut('normal');// 引用表单淡出
return false;
});

上面有几处地方要用到评论列表里面的一些id或类，自行替换为自己的吧。完成以上三步，基本就OK了。