skip to Main Content

when I click the anchor tag I need to be navigated to a different page & in that page I need a modal to be shown.How Can I do that I have tried in so many ways but Noting could Help me… Can anyone help me in this Thank you…

Here is my Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Shiva</h1>
    
    <a href="/something/121212"></a>
    
    <script>
        fetch('http://localhost:3000/data').then(res =>{
             return res.json()
        }).then(data =>{
            data.map(dating =>{
               const markup = ` <li>${dating.name}</li> `
               document.querySelector('a').insertAdjacentHTML('beforeend', markup)
            })
        })

        
    </script>
</body>
</html>

4

Answers


  1. I think first remove the href on anchor tag. Then use onClick on anchor tag.Because href will directly redirect to the provided url

    Login or Signup to reply.
  2. See this example below:


    Add an identifier on your query param like openModal=true so that you can track the page you want to open the modal. I guess you don’t need to open the modal everytime you visit the page.

    <a href="/something/121212?openModal=true">Click here</a>
    

    Now, on the page you redirected after clicking the link, when the page is fully loaded, get the query param

    <script>
      window.onload = (event) => {
      const urlParams = new URLSearchParams(window.location.search);
      const shouldOpenModal = urlParams.get("openModal");
    
      if (shouldOpenModal == "true") {
        // open your modal
      }
    };
    </script>
    

    If I summarize the solution, on the page you want to show the modal, wait for the page to load fully. Then show the modal.

    The openModal=true query param is just to track if you want to open the modal by clicking on that specific link you created by anchor tag, not when you visit the page in some other way or other links. You can avoid the query param and condition check if you always want to show the modal every time visiting the page.

    Login or Signup to reply.
  3. You can use boostrap modal and trigger it through Javascript. Here is an example code:-

    var myModal = new bootstrap.Modal(document.getElementById('exampleModalToggle'));
        myModal.show();
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> 
    
     <!-- Modal Trigger through Button -->
    
    <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
    
      <!-- Modal -->
      <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              Show a second modal and hide this one with the button below.
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
            </div>
          </div>
        </div>
      </div>

    I am triggering the modal on page load. You can adjust as you want. Hope it will be helpful.

    Login or Signup to reply.
  4. Here is the answer for your use case.

    Let’s say the code you have a home page with an anchor tag that points to profile page. Your need is to show a modal as soon as the profile page loads up.

    Let’s assume you navigate to profile.html from your current page using anchor tag. Then your profile.html will look something like this.

    <!DOCTYPE html>
    <head>
      <title>Profile</title>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous"
      />
    </head>
    <body>
      <!-- Modal -->
      <div
        class="modal fade"
        id="exampleModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">
                Close
              </button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Modal -->
    
      <script
        src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"
      ></script>
      <script>
        window.addEventListener("DOMContentLoaded", function () {
          $("#exampleModal").modal("show");
        });
      </script>
    </body>

    The main catch here is the eventListener that checks if the DOM has loaded & then fires a javascript event to show the modal.

    window.addEventListener("DOMContentLoaded", function () {
      $("#exampleModal").modal("show");
    });
    

    Please refer to this snippet for a reference using jQuery & Bootstrap modal. Rework on the same as per your need.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search