英文:
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 Using Javascript
问题
当我点击锚点时，我需要跳转到不同的页面，并在该页面上显示一个模态框。我已经尝试了很多方法，但没有什么能帮助我...有人可以帮助我吗？谢谢...
这是我的代码
<!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>
希望这可以帮助你。
英文:
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>
答案1
得分: 0
我认为首先移除锚标签上的 href 属性。然后在锚标签上使用 onClick。因为 href 会直接重定向到提供的 URL。
英文:
I think first remove the href on anchor tag. Then use onClick on anchor tag.Because href will directly redirect to the provided url
答案2
得分: 0
在你的查询参数中添加一个标识符，如openModal=true，以便你可以跟踪要打开模态窗口的页面。我猜你并不需要每次访问页面时都打开模态窗口。
<a href="/something/121212?openModal=true">点击这里</a>
现在，在你点击链接后重定向的页面上，当页面完全加载后，获取查询参数。
<script>
window.onload = (event) => {
const urlParams = new URLSearchParams(window.location.search);
const shouldOpenModal = urlParams.get("openModal");
if (shouldOpenModal == "true") {
// 打开你的模态窗口
}
};
</script>
如果我总结这个解决方案，在你想要显示模态窗口的页面上，等待页面完全加载，然后显示模态窗口。
openModal=true查询参数只是为了跟踪你是否想通过单击特定链接来打开模态窗口，而不是在其他方式或其他链接中访问页面时打开。如果你始终希望在每次访问页面时都显示模态窗口，可以避免使用查询参数和条件检查。
英文:
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.
答案3
得分: 0
You can use bootstrap modal and trigger it through Javascript. Here is an example code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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 it as needed. Hope this helps.
英文:
You can use boostrap modal and trigger it through Javascript. Here is an example code:-
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var myModal = new bootstrap.Modal(document.getElementById('exampleModalToggle'));
myModal.show();
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>
<!-- end snippet -->
I am triggering the modal on page load. You can adjust as you want. Hope it will be helpful.
答案4
得分: 0
这是你的用例的答案。
假设你有一个主页，其中有一个指向个人资料页面的锚点标签。你的需求是在个人资料页面加载时立即显示一个模态框。
假设你使用锚点标签从当前页面导航到profile.html。然后你的profile.html将类似于这样。
<!DOCTYPE html>
<head>
<title>Profile</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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">×</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/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script>
window.addEventListener("DOMContentLoaded", function () {
$("#exampleModal").modal("show");
});
</script>
</body>
主要的关键是事件监听器，它检查DOM是否已加载，然后触发一个显示模态框的JavaScript事件。
window.addEventListener("DOMContentLoaded", function () {
$("#exampleModal").modal("show");
});
请根据你的需要参考这个使用jQuery和Bootstrap模态框的示例。
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<head>
<title>Profile</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script>
window.addEventListener("DOMContentLoaded", function () {
$("#exampleModal").modal("show");
});
</script>
</body>
<!-- end snippet -->
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论