Modification du nom de la petite boîte de dialogue d'identification dans le menu déroulant Magnifique Popup

Question

Je devais changer le nom d'ID du petit dialogue dans le plugin JQuery Magnificent Popup. J'ai modifié le CSS pour corriger ce changement, mais maintenant la boîte de dialogue s'est cassée. Quoi et où dois-je chercher pour résoudre ce problème?

C'est le 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> 

et la seule CSS je peux trouver pour la petite boîte-dialogue:

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

Mon but est d'avoir chaque lien fournir un popup avec les détails de l'entreprise. En ce moment, l'écran s'assombrit, et le texte apparaît sur le côté gauche de l'écran, mais la belle boîte de dialogue blanche centrée est partie kaput.

Answer 1

Votre CSS a une erreur de syntaxe. Si vous souhaitez appliquer CSS pour plusieurs ID, vous devez utiliser "," seperator. Mettez à jour votre CSS comme ci-dessous, espérons qu'il va corriger l'erreur.

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