dialog 

<%@ 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>

 

posted @ 2017-08-28 00:09  keyiei  阅读(164)  评论(0)    收藏  举报