No puedo escribir un javascript único que pueda asignar identificadores para acceder y mostrar mediante enlaces directos. En la página tengo esta galería de imágenes y pies de foto:
<div class="modal-item"> <a onclick="document.getElementById('id001').style.display='block'" class="item-link"> <img class="thumb" src="image001"/> </div> <div id="id001" class="modal"> <div class="modal-content"> <img alt="" src="image001big"/> </div> <caption></caption> </div> </div> </div> <div class="modal-item"> <a onclick="document.getElementById('id002').style.display='block'" class="item-link"> <img class="thumb" src="image001"/> </div> <div id="id002" class="modal"> <div class="modal-content"> <img alt="" src="image002big"/> </div> <caption></caption> </div> </div> </div> ...Pero después de toda mi investigación solo llegué hasta aquí y no funciona. Además, no debería necesitar anular la especificación de la identificación cada vez que, de lo contrario, llene 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>Hay una manera mucho más fácil de hacer esto. La ventana ya tiene un objeto incorporado llamado window.location.hash , que devolverá #id001 si va a https://example.net/#id001 Aquí está la documentación de MDN al respecto.
La propiedad hash de la interfaz de ubicación devuelve un USVString que contiene un '#' seguido del identificador de fragmento de la URL: la ID en la página a la que la URL intenta dirigirse.
El fragmento no está decodificado en porcentaje. Si la URL no tiene un identificador de fragmento, esta propiedad contiene una cadena vacía, "".
Tenga en cuenta que estoy asignando manualmente la ID, pero eso es solo porque no puedo obtener el hash real de la window .
$(document).ready(function() { let id = window.location.hash; id = "#id002"; $(id).css('display', 'block'); }); // Pure JS example window.addEventListener('load', (event) => { let id = window.location.hash.substring(1); id = "id001" document.getElementById(id).style.display='block'; }); .modal { display:none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal-item"> <a onclick="document.getElementById('id001').style.display='block'" class="item-link"> <img class="thumb" src="https://www.fillmurray.com/200/200" /> </a> </div> <div id="id001" class="modal"> <div class="modal-content"> <img alt="" src="https://www.fillmurray.com/2000/2000" /> </div> <caption></caption> </div> <div class="modal-item"> <a onclick="document.getElementById('id002').style.display='block'" class="item-link"> <img class="thumb" src="https://www.fillmurray.com/199/199" /> </a> </div> <div id="id002" class="modal"> <div class="modal-content"> <img alt="" src="https://www.fillmurray.com/1999/1999" /> </div> <caption></caption> </div>