2017/07/21 
<html>
<head>
<link rel=”stylesheet” href=”https://ajax.googlea pis.com/ajax/libs/jq ueryui/1.12.1/themes /smoothness/jquery-ui.css”>
<script src=”https://ajax.googlea pis.com/ajax/libs/jq uery/3.2.1/jquery.mi n.js”></script>
<script src=”https://ajax.googlea pis.com/ajax/libs/jq ueryui/1.12.1/jquery -ui.min.js”></script>
<script>
$(function(){
var pos = 0; //現在表示対象
var checked = []; //選択値

$( ”#dialog” ).dialog({
autoOpen: false,
modal: true,
buttons: {
'OK': function() {
$(this).dialog('close');
}
},
});

$( ”#opener” ).on( ”click”, function() {
pos = 0;
checked = []
$(”:checkbox:checked”).each(function() {
checked.push($(this).val());//選択値を配列に収集
});
$('#dialog').on('dialogclose', function(event) {
//Dialog閉じたときにDialog再オープン
openDialog(checked[pos]);
});
//Dialog閉じたときにDialog再オープン
openDialog(checked[pos]);
});

function openDialog(val) {
if ( checked.length > pos) {
$(”#dialog”).dialog(”open”);
$(”#dialog #pos”).html(val);
pos++;
} else {
$('#dialog').off('dialogclose');
}
}
});
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”sel” value=”1”/>1<br/>
<input type=”checkbox” name=”sel” value=”2”/>2<br/>
<input type=”checkbox” name=”sel” value=”3”/>3<br/>
<input type=”checkbox” name=”sel” value=”4”/>4<br/>
<input type=”checkbox” name=”sel” value=”5”/>5<br/><br/>
<input type=”button” id=”opener” value=”popup”/>
</form>
<div id=”dialog”>
<p>dialog</p>
<div id=”pos”></div>
</div>
</body>
</html>


2016/11/21 n3
n3

Copyright (C) 2017 paperboy&co. All Rights Reserved.