es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Puedo asignar enlaces externos a diferentes IDs (modal) en mi página?

17 Jul, 2023 Programación

No puedo escribir un único código JavaScript que pueda asignar identificadores para ser accedidos y mostrados a través de enlaces directos.
En la página tengo esta galería de imágenes y sus descripciones:

<div class="modal-item">
    <a onclick="document.getElementById('id001').style.display='block';" class="item-link">
        <img class="thumb" src="image001">
    </a>
</div>
<div id="id001" class="modal">
    <div class="modal-content">
        <img alt="" src="image001big">
    </div>
    <caption></caption>
</div>


<div class="modal-item">
    <a onclick="document.getElementById('id002').style.display='block';" class="item-link">
        <img class="thumb" src="image001">
    </a>
</div>
<div id="id002" class="modal">
    <div class="modal-content">
        <img alt="" src="image002big">
    </div>
    <caption></caption>
</div>

Sin embargo, después de todas mis investigaciones, solo he llegado hasta aquí y no funciona. Además, no debería tener que especificar el id cada vez, de lo contrario llenaré la página con scripts.

<script type='text/javascript'>
$(document).ready(function() {

  if(window.location.href.indexOf('#id0743') != -1) {
    $('#id0743').modal('show');document.getElementById('id0743').style.display='block';
  }

});
</script>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para asignar identificadores únicos que puedan ser accedidos y mostrados mediante enlaces directos, puedes modificar el código HTML de la galería para incluir identificadores únicos para cada imagen y su diálogo modal correspondiente. Puedes hacer esto añadiendo un identificador único al atributo “id” de cada imagen y su diálogo modal correspondiente. Por ejemplo:

    <div class="modal-item">
  <a onclick="document.getElementById('id001-modal').style.display='block'" class="item-link">
    <img class="thumb" src="image001" id="id001">
  </a>
</div>
<div id="id001-modal" class="modal">
  <div class="modal-content">
    <img alt="" src="image001big">
  </div>
  <caption></caption>
</div>

    Luego, puedes modificar el código JavaScript para recuperar el identificador único de la barra de hash de la URL y utilizarlo para mostrar el diálogo modal correspondiente:

    <script type="text/javascript">
  $(document).ready(function() {
    var hash = window.location.hash;
    if (hash) {
      var id = hash.substring(1);
      $('#' + id + '-modal').show();
    }
  });
</script>

    En este código, primero obtenemos la barra de hash de la URL y, si existe, extraemos el identificador único al eliminar el carácter ‘#’. Luego, utilizamos jQuery para mostrar el diálogo modal con el id correspondiente. Ten en cuenta que agregamos ‘-modal’ al id para que coincida con el id del diálogo modal. De esta manera, cada imagen y su diálogo modal correspondiente tendrán identificadores únicos y podrán ser accedidos y mostrados mediante enlaces directos.

Comments are closed.