using javascript alert box in

I wanted to display a message when a link button is clicked on my web page.
Basically linkbutton is named More Details and when a user clicks that, more description abt a particular test should be displayed...
I followed this example.. which uses alert to display a message box

It works well, however, when a link button is clicked, the entire page goes blank when the alert box can i avoid that???

Is there any other easy way to accomplish what i am looking for?? I looked into modalpopup control.
(.but in my webpage i will have like 20 different link buttons which should do the same message....)

LVL 12
Who is Participating?
carlnorrbomConnect With a Mentor Commented:

Eh... no. I guess you could add the logic directly in the VS IDE. Just mark your button, open the properties and You will find "OnClientClick" under "Behaviors". Just add it there. You will however loose the dynamic aspects, but if you don't need that then there is no problem hard coding it into the different buttons. If your content is more or less static I guess that's they way to go for You. _personally_ I prefer to add controls dynamically but hey, that's just me!

>>the entire page goes blank when the alert box can i avoid that???
Using that example, I don't think you can avoid it.
What's happening is that because the codebehind adds the script to the page with this line:
page.ClientScript.RegisterClientScriptBlock(typeof(Alert), "alert", script);

When the alert gets shown, the rendering of the page is "paused" waiting for the user to respond to the alert message before it continues rendering the page.
>>but in my webpage i will have like 20 different link buttons which should do the same message....)

all link buttons will show the *exact* same message?
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Pra4444Author Commented:
Oohh..thats bad that we cant avoid that..

No..all link buttons will not show the same message..There is a text box next to the link button and based on the value it has, message will be different...

If i use a modal popup control, can i somehow use just one modal popup control and change the message depending on which linkbutton is clicked???

What other options do i have??


How are the linkbuttons added to page, programatically? In that case You could use:

btn.Attributes.Add("onclick", "Javascript:alert('Your static content " & Business logic goes here & "Other static content');")

Just let me know if this is something You can use.

Pra4444Author Commented:

Link buttons can be added either ways..Right now i have added it statically...

Where would i write your code in code behind.?? On page load???

If i use your above code, will i not get a blank page??



It should preferably be placed in the Page_Init (which is where I normally dynamically add controls). It will not cause a blank page because we are not posting anything back, it's all client side. What it does is simply adding a "onclick='Javascript:alert('')';" to the button.

Pra4444Author Commented:
So in order for this to work, do i have to add controls dynamically???

samtran0331Connect With a Mentor Commented:
>> more description abt a particular test should be displayed

Javascript alert is pretty limited on what you can display and how you display it.
If you want it to be a little more professional looking, I would go with a modal popup (yes, you can re-use it)
or even have your linkbuttons do a javascript'details.aspx?ID=...etc.
and when the details page pops up, catch the id for the record and get the record data and you can fully format it since you have a new (and complete) page to work with.
Pra4444Author Commented:
Yes just now i tried it with my static link button and it works well...however i dont like how it looks..i am starting to lean towards modal popup if i can figure out how to do it with multiple controls using the same popup control..( i will probably accept your solution as a assisted one as it worked..Thanks...)

I thought about it...I didnt want to bring in a new page just to display 2-3 lines of message...
How can i reuse my modal popup as one of the properties is specifying the targetID which is not going to be the same in my there any similar example that you an point me to??

Thanks for your help...

are the link buttons in a gridview? (how are you generating the linkbutton that go to each "particular test"?)
Pra4444Author Commented:
link buttons are static..and on a web page as just links inside a table.....
Since you don't plan on showing a large amount of data and don't care about formatting etc.
AJAX might be more complex than you need too.

Below is a demo page using a script from:

It uses javascript and a css style to provide a nice rollover tooltip....there are other tooltip demos on that site above.

The sample I'm posting shows you how to incorporate the tooltip code to show both a "static" tooltip on a linkbutton as well as wiring it up to linkbuttons in a grid.

If you have a northwind database and a connection to it in your web.config, the below page will work for you.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        If Not Me.IsPostBack Then
            With Me.LinkButton1.Attributes
                .Add("onmouseover", "javascript:fixedtooltip('<strong>Today is:</strong>&nbsp;&nbsp;" & Today.ToShortDateString() & "',this,event,'150px');")
                .Add("onmouseout", "javascript:delayhidetip();")
            End With
        End If
    End Sub
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim lbtn As LinkButton = CType(e.Row.FindControl("LinkButton2"), LinkButton)
            With lbtn.Attributes
                .Add("onmouseover", "javascript:fixedtooltip('<strong>Full Name is:</strong>&nbsp;&nbsp;" & e.Row.DataItem("FULL_NAME") & "',this,event,'150px');")
                .Add("onmouseout", "javascript:delayhidetip();")
            End With
        End If
    End Sub
<html xmlns="">
<head id="Head1" runat="server">
    <title>Tool Tip</title>
    <style type="text/css">
            padding: 2px;
            border:1px solid black;
            font:normal 10px Verdana;
    <script type="text/javascript">
            * Fixed ToolTip script- © Dynamic Drive (
            * This notice MUST stay intact for legal use
            * Visit for full source code
            var tipwidth='150px' //default tooltip width
            var tipbgcolor='lightyellow'  //tooltip bgcolor
            var disappeardelay=250  //tooltip disappear speed onMouseout (in miliseconds)
            var vertical_offset="0px" //horizontal offset of tooltip from anchor link
            var horizontal_offset="-3px" //horizontal offset of tooltip from anchor link
            /////No further editting needed
            var ie4=document.all
            var ns6=document.getElementById&&!document.all
            if (ie4||ns6)
            document.write('<div id="fixedtipdiv" style="visibility:hidden;width:'+tipwidth+';background-color:'+tipbgcolor+'" ></div>')
            function getposOffset(what, offsettype){
            var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
            var parentEl=what.offsetParent;
            while (parentEl!=null){
            totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
            return totaloffset;
            function showhide(obj, e, visible, hidden, tipwidth){
            if (ie4||ns6)
            if (tipwidth!=""){
            if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
            else if (e.type=="click")
            function iecompattest(){
            return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
            function clearbrowseredge(obj, whichedge){
            var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
            if (whichedge=="rightedge"){
            var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
            if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
            var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
            if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
            return edgeoffset
            function fixedtooltip(menucontents, obj, e, tipwidth){
            if (window.event) event.cancelBubble=true
            else if (e.stopPropagation) e.stopPropagation()
            dropmenuobj=document.getElementById? document.getElementById("fixedtipdiv") : fixedtipdiv
            if (ie4||ns6){
            showhide(, e, "visible", "hidden", tipwidth)
            dropmenuobj.x=getposOffset(obj, "left")
            dropmenuobj.y=getposOffset(obj, "top")
  , "rightedge")+"px"
  , "bottomedge")+obj.offsetHeight+"px"
            function hidetip(e){
            if (typeof dropmenuobj!="undefined"){
            if (ie4||ns6)
            function delayhidetip(){
            if (ie4||ns6)
            function clearhidetip(){
            if (typeof delayhide!="undefined")
    <form id="form1" runat="server">
        <asp:LinkButton ID="LinkButton1" runat="server">Static Link</asp:LinkButton>
        <br />
        <br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
            SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [LastName]+', '+[FirstName] AS [FULL_NAME]  FROM [Employees]">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
            DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                <asp:TemplateField HeaderText="EmployeeID" InsertVisible="False" SortExpression="EmployeeID">
                        <asp:LinkButton ID="LinkButton2" runat="server" Text='<%# Eval("EmployeeID") %>'></asp:LinkButton>

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.