I'm currently facing an issue with my jquery dialog box. I've gone through my code multiple times but I can't seem to figure out what's wrong. I have a button that, when clicked, displays a list of coaches' names. What I want is for the dialog box to open and show some hidden data (another div) when a user clicks on a name. However, the problem is that when the name is clicked, the dialog box appears without the modal working properly and no styling applied—it just opens on top of other elements.
For reference, here's the code snippet:
HTML
<div class="coaches">
<h3>Head Coaches </h3>
<br />
<p class="coach">Example Coach Text</p>
</div>
<br />
<div class="displayInfo">
Example Text
</div>
Script
$(".coaches").click(function () {
$(".displayInfo").dialog({
autoOpen: false,
height: 450,
width: 450,
title: "Example Text",
modal: true,
// overlay: { backgroundColor: "#000000", opacity: 0.5 }
});
$(".displayInfo").dialog('open');
});