如何在屏幕上保持弹出模式的同时停止导航？

Question

在我的页面上，我有一个声明如下的按钮对象。

<a class="button class" href="www.sometargeturl.com" onclick="makevisibile()">

javascript makevisible()函数只显示<div>标记，然后就像模式弹出窗口一样。

当用户点击按钮时，会显示弹出窗口，但在一秒钟后，用户将导航到sometargeturl.com。我想要的是弹出窗口停止导航过程，直到用户关闭它，或点击它之外，然后我才想恢复导航。

使用普通的html / css和javascript是否可行，或者我是否必须使用一些花哨的框架？

干杯， 鲍勃

Answer 1

您需要使用return false;阻止默认操作：

<a class="button class" href="www.sometargeturl.com" onclick="makevisibile();return false;">

或者将return false作为makevisible()函数的最后一行：

<a class="button class" href="www.sometargeturl.com" onclick="return makevisibile();">

function makevisibile(){
    // ....
    return false;
}

Answer 2

您希望阻止链接的默认行为（即导航）。

您可以使用其他元素代替href，例如button，也可以使用类似于@Set Sail Media建议的代码片段。

请注意，在这两种情况下，当用户关闭“弹出窗口”时，您手动需要将网址更改为正确的位置。

编辑1

Bob，就像您在评论中指出的那样，如果您禁用href的默认行为，则当用户关闭弹出窗口时页面不会更改。

假设你有一个名为close_modal()的模态窗口的关闭函数，然后调用它然后用户关闭“弹出窗口”

function close_modal()
{
document.location='http://www.example.com';
}

您不需要为此创建单独的功能，这一切都取决于您的页面当前的外观。

要获得更复杂的答案，请发布一个jsfiddle。