Multiple Jquery UI Dialog Box On Single Page
Creating multiple jquery ui dialog box on single page and open it on
click event one by one using loop, classes and id attribute.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple jQuery UI Dialog</title>
<link rel="stylesheet" href="smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var options = {
show: 'blind',
hide: 'fold',
width: 800,
modal: true
};
$( ".getDetails" ).on( "click", function(e) {
/*console.log(this.id);*/
e.preventDefault();
$( "#dialogBox" + this.id ).dialog(options);
});
});
</script>
</head>
<body>
<cfoutput>
<cfloop from="1" to="10" index="xx">
<div id="dialogBox#xx#" title="Basic dialog" style="display:none">
<p>This is an animated dialog #xx#</p>
</div>
<a href="javascript:void(0)" id="#xx#" class="getDetails"> Get Details</a><br>
</cfloop>
</cfoutput>
</body>
</html>
Comments
Post a Comment