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
I think first remove the href on anchor tag. Then use onClick on anchor tag.Because href will directly redirect to the provided url
See this example below:
Add an identifier on your query param like
openModal=trueso 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.Now, on the page you redirected after clicking the link, when the page is fully loaded, get the query param
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=truequery 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.You can use boostrap modal and trigger it through Javascript. Here is an example code:-
I am triggering the modal on page load. You can adjust as you want. Hope it will be helpful.
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.
The main catch here is the eventListener that checks if the DOM has loaded & then fires a javascript event to show the modal.
Please refer to this snippet for a reference using jQuery & Bootstrap modal. Rework on the same as per your need.