0

Esta pregunta está dedica a pruebas de Stack Snippets. Para mayor información véase ¿Qué es Stack Snippet?

NOTA: Para publicar en meta se requiere el privilegio Participar en Meta (5 puntos de reputación).

Para pruebas de formato, véase Pruebas de formato (Sandbox)

2 respuestas 2

1

Modal en Stack Snippet. Adaptación de respuesta a Open link in a popup window inside an iframe

function doalert(obj) {
  var el = document.getElementById('here').src = (obj.getAttribute("value"));;
  return false;
}

var modal = document.getElementById('modinfo');
var span = document.getElementsByClassName("close")[0]; 
function test() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
<a onclick="doalert(this);test()" value="https://example.com">Link1</a>

<!-- Modal -->
<div id="modinfo" class="modal" style="display: none;">
  <!-- Modal content -->
  <div style="margin: 0 auto; width: 80%;background: white;border: none; border-radius: 0">
    <span class="close" style="cursor:pointer;color: #3D5872; font-size: 26px">x</span>
    <iframe id="here" src="" style="width: 100%; height: 310px;border: none;"></iframe>
  </div>
<!-- Modal content -->
</div>
<!-- Modal -->

0

Nota: Esta respuesta se trata más de las ediciones y no tanto de la respuesta en sí misma.

Las ediciones importantes son desde la 2 hasta la 7 (aunque en la edición 2 erróneamente en la descripción puse que era la edición 1).

En las ediciones, se puede ver cómo es que al fusionar los tres archivos, JavaScript, CSS y HTML, a veces el markdown en paralelo no hace cambios en el código.

Lo importante es que al cambiar el orden de los lenguajes, en el markdown aparece todo en rojo a la izquierda y a la derecha aparece el mismo código pero en verde.

A pesar de que cambia el orden de los lenguajes, al cambiar a en paralelo, el snippet se ve igual, en el mismo orden, JavaScript, CSS y HTML.

Si el snippet no llega a aparecer al tocar en paralelo, aparecerá un enlace con el texto completo, que sirve para ver la respuesta completa. Este no es el caso ya que es una respuesta muy corta. Tal enlace aparece solo en respuestas largas.

Ejemplo de problema.

A continuación dejaré el código con snippet.

setInterval(function() {
  var elemento = document.querySelector("a")
  var texto = elemento.innerHTML
  var resultado = texto.slice(1) + texto.slice(0, 1)
  elemento.innerHTML = resultado
}, 500)
center {
  color: #1020ff;
  background-color: #90e0a070;
  font-size: 2em;
}
<center><b><a> ¡Hola mundo! </a></b></center>

Debes iniciar sesión para responder a esta pregunta.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta .