jquery - 在 Magnificent Popup 中更改 ID 小对话框名称

Question

我需要更改 Magnificent Popup JQuery 插件中小对话框的 ID 名称。我更改了 CSS 以更正此更改，但现在对话框已损坏。我需要在什么地方寻找什么来解决这个问题？

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

以及我能为小对话框找到的唯一 CSS:

    /* 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;
}

我的目标是让每个链接都提供一个包含公司详细信息的弹出窗口。现在，屏幕变暗，文本出现在屏幕左侧，但漂亮的居中白色对话框已经失效。

Answer 1

您的 CSS 有语法错误。如果你想为多个 id 应用 CSS，你应该使用“，”分隔符。像下面这样更新你的 CSS，希望它能修复错误。

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