<%@ 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 { 200px; } </script> <script> $(document).ready(function (){ $( "#dialogArea" ).dialog({ autoOpen: false, height: 300, 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;20%;border:solid black;'></div> <div id='dialogArea'> <div style="100px; float:left">コメント:</div> <div><textarea id='textArea'></textarea></div> </div> </body> </html>