<html charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<title>JavaScriptサンプル</title>
<!--jQueryを読み込み-->
<script src="http://www17.plala.or.jp/norikoba/tool/jquery-3.6.0.js"></script>
<!--jQuery UIを読み込み-->
<script src="http://www17.plala.or.jp/norikoba/tool/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www17.plala.or.jp/norikoba/tool/jquery-ui.css">
<style>
body {
background-color: white;
}
</style>
<script>
function showDialog(title,str,width){
document.getElementById("dialog").innerHTML = str;
$( function() {
$( "#dialog" ).dialog(
{
title: title,
width: width,
}
);
} );
}
function showDialog2(title,str,width){
document.getElementById("dialog2").innerHTML = str;
$( function() {
$( "#dialog2" ).dialog(
{
title: title,
width: width,
modal: true,
}
);
} );
}
function popup1(){
title = "注意1";
str = "これはサンプル1です";
showDialog(title,str,300);
}
function popup2(){
title = "注意2";
str = "これはサンプル2です";
showDialog2(title,str,300);
}
</script>
</head>
<body>
<h2>ポップアップサンプル</h2>
<form>
<a href="javascript:popup1()">ポップアップ1</a>
<br>
<br>
<input type="button" value="ポップアップ2" onclick="popup2()">
<span id="dialog"></span>
<span id="dialog2"></span>
</form>
</body>
</html>
|