I recently encountered an issue while trying to change the ID name of the small-dialog in the Magnificent Popup JQuery Plugin. After making the necessary CSS adjustments to accommodate this change, the dialog box stopped functioning properly. I am now seeking guidance on how to troubleshoot and resolve this problem.
Here is the relevant HTML code:
<li>
<a class="popup-with-zoom-anim" href="#small-dialogC"><?php echo $chase["Company"]; ?> </a>
</li>
<li>
<a class="popup-with-zoom-anim" href="#small-dialogB"><?php echo $bestBuy["Company"]; ?> </a>
</li>
<li>
<a class="popup-with-zoom-anim" href="#small-dialogR"><?php echo $rjsEatery["Company"]; ?> </a>
</li>
<li>
<a class="popup-with-zoom-anim" href="#small-dialogP"><?php echo $pizzaHut["Company"]; ?> </a>
</li>
</ul>
<div id="small-dialogC" class="zoom-anim-dialog mfp-hide">
<h1>The Details</h1>
<?php echo '<dl>';
foreach ( $chase as $key => $value ) {
echo "<dt>$key</dt><dd>$value</dd>";
}
echo '</dl>'; ?>
</div>
<div id="small-dialogB" class="zoom-anim-dialog mfp-hide">
<h1>The Details</h1>
<?php echo '<dl>';
foreach ( $bestBuy as $key => $value ) {
echo "<dt>$key</dt><dd>$value</dd>";
}
echo '</dl>'; ?>
</div>
<div id="small-dialogR" class="zoom-anim-dialog mfp-hide">
<h1>The Details</h1>
<?php echo '<dl>';
foreach ( $rjsEatery as $key => $value ) {
echo "<dt>$key</dt><dd>$value</dd>";
}
echo '</dl>'; ?>
</div>
<div id="small-dialogP" class="zoom-anim-dialog mfp-hide">
<h1>The Details</h1>
<?php echo '<dl>';
foreach ( $pizzaHut as $key => $value ) {
echo "<dt>$key</dt><dd>$value</dd>";
}
echo '</dl>'; ?>
</div>
</section>
Below is the CSS code related to the small-dialog box:
/* Styles for dialog window */
#small-dialogC
#small-dialogB
#small-dialogR
#small-dialogP {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 400px;
margin: 40px auto;
position: relative;
}
My objective is to ensure that each link triggers a popup displaying the company details. Currently, when clicking on a link, the screen darkens, and the text appears on the left side instead of inside the centered white dialog box. I am seeking assistance to rectify this issue.