changing ID small-dialog name in Magnificent Popup

Question

I needed to change the ID name of small-dialog in the Magnificent Popup JQuery Plugin. I have altered the CSS to correct this change, but now the dialog box has broken. What and where do i need to look to fix this?

This is the HTML:

                <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>

and the only CSS I can find for 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 goal is to have each link provide a popup with the company details. Right now, the screen darkens, and the text appears on the left side of the screen, but the nice centered white dialog box has gone kaput.

Answer 1

Your CSS have syntax error. If you want to apply CSS for multiple id's you should use "," seperator. Update your CSS like below, hope it will fix the error.

 #small-dialogC,
 #small-dialogB,
 #small-dialogR,
 #small-dialogP 
{
background: white;
padding: 20px 30px;
text-align: left;
max-width: 400px;
margin: 40px auto;
position: relative;
}