showing one modal at a time
Hello,
I have a list of cd track. I want to use a modal for showing the songtext of every track.
I used the following code based on the jquery dialog example.
<script>
$(function() {
$( "#dialog0101" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#dialog0102" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener0101" ).click(function() {
$( "#dialog0101" ).dialog( "open", "modal", true );
});
$( "#opener0102" ).click(function() {
$( "#dialog0102" ).dialog( "open", "modal", true );
});
});
</script>
<div id="dialog0101" title="Basic dialog">
<p>Text cd 1 track 1</p>
</div>
<div id="dialog0102" title="Basic dialog">
<p>Text cd 1 track 2</p>
</div>
<td><button id="opener0101">Text</button></td>
<td><button id="opener0102">Text</button></td>
When a modal is activated the background is not disabled. When another button is clicked this modal and the already activated modal is also display on the same spot as the other. How can I disable the background?
Is it also possible to shorten the above code?