我想在Linkbutton上调用javascript弹出，但它回发页面并弹出消失

Question

Javascript代码：

function showdlgBox()
{
    var whiteBox = document.getElementById("white-background");
    var dlgbox = document.getElementById("dlgBox");
    whiteBox.style.display = "block";
    dlgbox.style.display = "block";`enter code here`
    var winwidth = window.innerWidth;
    var winHighet = window.innerHeight;`enter code here`
    dlgbox.style.left = (winwidth / 2) - 480 / 2 + "px";
    dlgbox.style.top = "150px";
}

HTML：

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>

如何在linkbutton上调用此javascript？

Answer 1

<强>解释

据我所知，

OnClick="LinkButton1_Click"

链接到后端（服务器端）功能 - 这就是回发的原因。

<强>解决方案：

或许试着把它拿出来。或者，使用纯html锚标记：

<a id='LinkButton1' href='javascript:void(0)'></a>

祝你好运

Answer 2

调用javascript函数onclientclick

<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" onClientClick="return showdlgBox()">LinkButton</asp:LinkButton>

并在javascript函数中返回false;

 function showdlgBox() {
            var whiteBox = document.getElementById("white-background");
            var dlgbox = document.getElementById("dlgBox");
            whiteBox.style.display = "block";
            dlgbox.style.display = "block";`enter code here`
            var winwidth = window.innerWidth;
            var winHighet = window.innerHeight;`enter code here`
            dlgbox.style.left = (winwidth / 2) - 480 / 2 + "px";
            dlgbox.style.top = "150px";
            return false;
        }

这应该可以解决问题。

Answer 3

使用OnClientClick="showdlgBox();"

<asp:LinkButton ID="LinkButton1" runat="server"  OnClientClick="showdlgBox();">LinkButton</asp:LinkButton>

Answer 4

你可以在bootstrap中使用modal ..

link of modal