<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:500px
height:300px
border:1px solid #ccc
padding:10px
box-sizing:border-box
}
.write{
margin-top:50px
}
textarea{
width:500px
height:94px
box-sizing:border-box
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
</head>
<body>
<div>
<h2>评论区</h2>
<div class="box">
<!--<p>我是评论内容1</p>-->
</div>
</div>
<div class="write">
<textarea id="textblock"></textarea>
<button class="submit">提交内容</button>
</div>
<script>
$(function(){
var arr = []
function writecon(){
var str = ''
for(var i=0 i<arr.length i++){
str += "<p>" + arr[i] + "</p>"
}
$(".box").append(str)
}
writecon()
$(".submit").click(function(){
var textblock = $("#textblock").val()
if(textblock){
arr.push(textblock)
var str = "<p>" + textblock + "</p>"
$(".box").append(str)
$("#textblock").val("")
console.log(arr)
}else{
alert("请输入内容")
}
})
})
</script>
</body>
</html>
建议使用jquery 很方便就能实现你要的效果，在控件的onclick="loadDiv('login.aspx','','用户登录','modify')"
function loadDiv(url,option,title,divID)
{
var id=(new Date()).getTime()
if(divID)
{
colseDiv(divID)
id=divID
}
var div=$('<div id="msg'+id+'" class="message">')
if(url.indexOf('?')!=-1)
{
url+='&container='+id
}else
{
url+='?container='+id
}
var container=$('<div id="container'+id+'" class="container">')
var title=$('<div class="title">'+title+'<input type="image" name="imageField" id="imageField" src="/images/no.gif" alt="关闭" onclick="colseDiv(\''+id+'\')" style="position:absoluteright:0pxcursor:handborder:0px" onload="$(this).parent().find("#spanClose").css("display","none")"/><span id="spanClose" style="position:absoluteright:0pxcursor:handborder:0px" onclick="colseDiv(\''+id+'\')">关闭</span></div>')
container.append(title)
container.append(div)
div.html('<img src="/images/loading.gif"style="border:0px"><font color="red">正在加载，请稍候。。。</font>')
container.css("z-index",_conatinerID++)
$('body').append(container)
//var offset=$(event.srcElement).offset()
//var x = offset.left
//var y = offset.top
var x = 500
var y = 150
anchToTarget(id,x,y)
var data=null
if(option &&option.data)data=option.data
div.load(url,data,function()
{
anchToTarget(id,x,y)
if(option &&option.callback)
{
option.callback(id)
}
})
}
用到的核心样式.container{
position: absolute
z-index: 40
left:0px
top:0px
text-align:center
border-top:solid #4569A5 2px
border-left:solid #4569A5 2px
border-right:solid #6F91C8 2px
border-bottom:solid #6F91C8 2px
width:auto
}
用到的jquery.js代码太多，自己可以去百度上下载也可联系我给你
CSS是用来写按钮的一些样式,但是无法做到事件，交互Js 用来写和用户的交互 也就是点击
ajax 在数据库取值，实现页面无刷新读取数据，
形成即时点击显示当前顶的数
