<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<link href="../css/jquery-ui.css" rel="stylesheet">
<script type="text/css">
body{
font-family: "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</script>
<script>
$(document).ready(function (){
$( "#dialogArea" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Ok": function(){
var txt = "<div style='word-wrap:break-word;'>den:" + $("#textArea").val() + " </div>"
$("#list").append(txt);
$( "#dialogArea" ).dialog( "close" );
},
Cancel: function() {
$( "#dialogArea" ).dialog( "close" );
}
},
close: function() {
$("#textArea").val("");
}
});
$("#dialog").on('click',function(){
$( "#dialogArea" ).dialog("open");
});
});
</script>
</head>
<body>
<div id="container-main">
<input type='button' id='dialog'/>
<div id='list' style='min-height:10px;width:20%;border:solid black;'></div>
<div id='dialogArea'>
<div style="width:100px; float:left">コメント：</div>
<div><textarea id='textArea'></textarea></div>
</div>
</body>
</html>
