How to activate a href="# id" from another page .html?

Question

How to activate a href="# id" from another page .html?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

How can I make a click on a route that should take me to an identifier and this identifier must perform a secondary action as modal, everything works well from the same page, since the reference from there , but in the practical exercise it must work from another page .html different.

Link code:

    <li><a id="demo01" onclick="window.location.href = '#animatedModal';">DEMO01</a></li>

Div code to which you must arrive

!--DEMO01-->
        <div id="animatedModal">
            <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
            <div  id="btn-close-modal" class="close-animatedModal"> 
                CLOSE MODAL
            </div>

            <div class="modal-content">
                <!--Your modal content goes here-->
            </div>
        </div>

javascript html5

asked by David 11.06.2017 в 23:48

source

2 answers

How do I get the full path of a selected file with a type="file" field? [duplicate] Unzip a .zip file in PHP? [closed]

score 1 · Answer 1

If for example both files are in the same folder you could put the name of the file before the identifier. If they were in different folders, you would have to put the path to the file in question.

Example:

<li><a id="demo01" onclick="window.location.href = 'tuOtraPagina.html#animatedModal';">DEMO01</a></li>

score 0 · Answer 2

How can I make a click on a route that should take me to an identifier and this identifier must perform a secondary action «as modal» .

I do not know how bootstrap does it (the example I always see of this), but right now I imagine a way in which you hear changes in the URL and checking it when loading the document.

Example :

<div id="anuncio" class="modal">
  <!-- contenido -->
</div>

window.addEventListener('load', (e) => {
  if (!window.location.hash.length) { return }
  const hash = window.location.hash
  const modal = document.querySelector(hash)

  if (modal && modal.classList.contains('modal')) {
    console.log(modal)
  }
})

window.addEventListener('popstate', (e) => {
  if (!window.location.hash.length) { return }
  const hash = window.location.hash
  const modal = document.querySelector(hash)

  if (modal && modal.classList.contains('modal')) {
    console.log(modal)
  }
})

In this case you try to get the URL hash. If it finds it, it obtains the element with said id and then verifies that it has the class modal . The latter is subjective, instead of a class you can use anything else; the point is to know if it is a modal to proceed to show it.