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，您应该使用＆＃34;，＆＃34;分隔符。像下面一样更新您的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;
}

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

1 个答案: