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

Question

Javascript code:

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>

How to Call this javascript on linkbutton ?

Answer 1

Explanation:

As far as I understand it, that

OnClick="LinkButton1_Click"

gets linked to the back end (server side) function - this is why the post back occurs.

Solution:

Perhaps try taking it out. Or alternatively, use pure html anchor tag:

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

Good Luck

Answer 2

Call javascript function onclientclick

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

and in javascript function return 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;
        }

This should do the trick.

Answer 3

使用OnClientClick="showdlgBox();"

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

Answer 4

you can use modal in bootstrap..

link of modal