单击链接时如何在同一页面上显示框

how to display box on same page when a link is clicked

本文关键字：一页 显示 链接 单击      更新时间：2024-02-04

我正在制作基于php的web应用程序。当使用java脚本点击链接时，我希望在同一页面上显示一个框。我怎样才能做到这一点？？我已经尝试了以下代码

<script>
function a()
{
    document.getElementsById("a").style.visibility="visible";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="" onclick="a()">
    Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
</div>

文档的方法错误。

它应该是getElementById，您可以使用Google chrome DEV工具（windows上的Ctrl+shift+i，Mac上的''+option>+i）来调试您的代码。

您需要修复的getElementsById不是复数，应该是getElementById

要在单击时停止页面重新加载，请设置href="javascript:a()"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script>
function a()
{
    document.getElementById("a").style.visibility="visible";
}
function close_a()
{
    document.getElementById("a").style.visibility="hidden";
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="javascript:a()">
    Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;visibility:hidden">
<a href="javascript:close_a()"><i class="fa fa-times-circle"></i> Close Me</a>
</div>

添加了关闭和字体真棒的功能

将您的代码更改为此，框将显示：

<script>
function a()
{
    document.getElementById("a").style.display="block";
    return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a()">
    Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>

你的代码中有一个错误。getElementById是正确的，并且您的<a>链接刷新页面，避免刷新的正确方法是将onclick="a();"更改为onclick="return a();"，以便javascript查找函数的返回，而在函数中，我们返回false，因此保持页面不变并避免刷新。

此外，您可以将内容添加到您的盒子中：

<script>
function a()
{
    document.getElementById("a").style.display="block";
    document.getElementById("a").innerHTML="<b>your other contents inside the box</b>";
    return false;
}
</script>
<a style="position:absolute;left:84%;top:32%;font-size:13px " href="#" onclick="return a();">
    Forgot Password?
</a>
<div id="a" style="position:absolute;left:30%;top:10%;width:40%;height:40%;background-color:lightgray;display: none">
</div>
相关文章：