JSFiddle - React, Tailwind, and code Playground

by Fairlight

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<div id="pref_modal" style="display:none;">
<p class="chart_type_area">
    表示<br>
    <input type="radio" name="chart_type" value="line" checked="checked">ライン表示
    <input type="radio" name="chart_type" value="point">ポイント表示
</p>
<p class="yAxis_type_area">
  Y軸<br>
    <input type="radio" name="yAxis_type" value="linear" checked="checked">線形
    <input type="radio" name="yAxis_type" value="log">対数
</p>
<p>Y軸最大値<input type="text" id="_ymax" size="5" maxlength="5">
</p>
<p>
Y軸最小値<input type="text" id="_ymin" size="5" maxlength="5">
</p>
</div>
<input type="button" id="button1" value="ボタン1" />

<p id="ymax"></p>
<p id="ymin"></p>

JavaScript

$(function() {
	$("#button1").click(function() {
		$("#pref_modal").dialog({
			modal:true, //モーダル表示
			title:"設定", //タイトル
			buttons: { //ボタン
			"OK": function() {
				$("#ymax").text($("#_ymax").val());
        $("#ymin").text($("#_ymin").val());
        $("#button").click(function(){
					$("#text").toggle();
				});
				$(this).dialog("close");
				},
			"Cancel": function() {
				$(this).dialog("close"); 
				}
			}
		});
	});
});