No estoy muy versado en JavaScript, por lo que probablemente no esté explicando esto bien, pero tengo un jsfiddle . Tengo un script que muestra un modal con otra página. Si estoy usando un enlace, todo está bien y todo funciona. Es perfecto para lo que necesito.

Hay momentos en los que quiero agregar un segundo enlace con la misma ID para que aparezca con la misma funcionalidad, la misma página y todo, pero cuando hago eso, solo funciona el primer enlace en la página y el segundo enlace falla.

Si elimino el primer enlace, el segundo funciona bien.

Agradecería cualquier idea sobre cómo solucionar esto para que ambos funcionen.

HTML:

 <p> <a href="" id="link" >Add your thoughts (this works, but the second link doesn't unless this one is removed).</a > </p> <a href="" id="link">View or Add Comments</a><br /> <div id="popup"><iframe id="popupiframe"></iframe></div> <div id="popupdarkbg"></div> <p>(Click background to exit popup)</p>

JavaScript:

 document.getElementById("link").onclick = function (e) { e.preventDefault(); document.getElementById("popupiframe").src = "http://www.blankwebsite.com/" document.getElementById("popup").style.display = "block"; document.getElementById("popupiframe").src = "http://www.blankwebsite.com/"; document.getElementById("popupdarkbg").onclick = function () { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; };

CSS:

 #comments { width: 100%; text-align: center; margin: 15px 0 15px 0; } #popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 80%; background-color: white; z-index: 10; } #popup iframe { width: 100%; height: 100%; border: 0; } #popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.75); display: none; }