Question

关于javascript弹出界面样式设计， 大神看过来

这个弹出界面对应的js代码为：
//Ajax发送内容function ReMsg(){ msg = $("#msg").val();
$.ajax({ url : "message_do.php", type:'post', data:{"action":"remsg", "msg":msg, "id":id}, dataType:'html', beforeSend:function(){}, success:HideReWin });}//显示回复窗口function ShowReWin(reid){ id = reid; var cont = $("#recont_"+id).attr("rel");
$("#graybg").show(); $("#popup_window").show(); $("#msg_area").html('<form name="form" id="form" method="post"><textarea name="msg" id="msg" class="smgarea" onkeyup="CkReMsgLen(this);">'+ cont +'</textarea><a href="javascript:;" onclick="ReMsg();" class="sendbtn"><img src="templates/images/remessage.gif" /></a><span id="length"></span></form>');}//隐藏回复窗口function HideReWin(data){ $("#graybg").hide(); $("#popup_window").hide(); $("#recont_"+id).attr("rel", msg); $("#tit_"+id).html(data);
//setInterval('location.reload();',1000);}//检测输入文字function CkReMsgLen(txt){ $("#length").html('您已经输入了： '+ txt.value.length +' 个字');}//创建回复窗口$(function(){ $("body").append('<div id="graybg"> </div> <div id="popup_window"><div class="header"><span class="title">回复留言：</span> <span class="close_div"><a href="javascript:HideReWin();" ></a></span><div class="cl"></div></div><div class="msg_area" id="msg_area"> </div></div>');});
我现在想弹出框变成有2个小框，也就是将之前的一个大框分成2个小文本框。
如下图这样的样式，不知道怎么修改上的代码 求大神帮忙下：
就是把文本框分成2个小文本框





Answer 1

$("#msg_area").html('<form name="form" id="form" method="post">
<textarea name="msg" id="msg" class="smgarea" onkeyup="CkReMsgLen(this);">'+ cont +'</textarea>
<--开始添加-->
<textarea name="msg1" id="msg1" class="smgarea" >'+ cont +'</textarea>
<--添加结束-->
<a href="javascript:;" onclick="ReMsg();" class="sendbtn"><img src="templates/images/remessage.gif" /></a><span id="length"></span></form>');

function ReMsg()
{
msg = $("#msg").val();
msg1 = $("#msg1").val(); //这儿加上第2个文本框的取值
$.ajax({
url : "message_do.php",
type:'post',
data:{"action":"remsg", "msg":msg, "id":id,'msg1':msg1}, //这儿post到服务器添加一个QString
dataType:'html',
beforeSend:function(){},
success:HideReWin
});
}

追问

请问怎么查看效果啊？我装了Dreamweave8 不知道怎么查看修改后的效果 求指点

追答

直接用浏览器浏览不就好了？

追问

请问，为什么创建回复窗口那里的代码不用修改吗？

追答

因为他们共用了msg_area的Div.

Answer 2

//显示回复窗口
function ShowReWin(reid)
{
id = reid;
var cont = $("#recont_"+id).attr("rel"); $("#graybg").show();
$("#popup_window").show();
$("#msg_area").html('<form
name="form" id="form" method="post"><textarea name="msg" id="msg"
class="smgarea" onkeyup="CkReMsgLen(this);">'+ cont
+'</textarea>
<textarea name="msg1" id="msg1"
class="smgarea" onkeyup="CkReMsgLen(this);">'+ cont
+'</textarea><a href="javascript:;" onclick="ReMsg();"
class="sendbtn"><img src="templates/images/remessage.gif"
/></a><span id="length"></span></form>');
}

这样 就会出现两个了

追问

请问怎么查看效果啊？我装了Dreamweave8 不知道怎么查看修改后的效果 求指点

追答

f12 就预览了

追问

请问，为什么创建回复窗口那里的代码不用修改吗？