Saturday, 24 November 2012

Popup like tool tip.

For simple information display like popup window in dot net web page, you can use the below coding.  

Refer the image, a small yellow color window will display with X button for close the popup. The popup window displaying "feet-cm" mapping information for users.

You can avoid a new aspx page for this type of popup window. 

in aspx page:
#1. Paste this below coding inside form tag.
<asp:TextBox ID="txtHeight" runat="server" CssClass="TxtBox" Width="26%" MaxLength="7"></asp:TextBox>
 

<a lang="javascript" style="position: relative" onclick="return funGoScript()" href="#" name="btnGoScript">Refer(feet-cm)</a>


<div class="ToolTip" id="spnGo">
        <table style="border-color:Black; border-width:thin;border-style:solid">
            <tr>
                <td class="txtnormal">
                    <div>
                        <input class="btn" style="float: right" onclick="document.getElementById('spnGo').style.display='none'"
                            type="button" value="X" />
                        <br clear="all" />
                    </div>
                    <p align="left">
                        121cm - 4ft<br />
                        134cm - 4ft 5in<br />
                        152cm - 5ft<br />
                        165cm - 5ft 5in<br />
                        182cm - 6ft<br />
                        195cm - 6ft 5in<br />
                        213cm - 7ft
                    </p>
                </td>
            </tr>
        </table>
    </div>


#2. in aspx page inside script tag, paste the below coding.
 function funGoScript() {
            document.getElementById("spnGo").style.display = "block";
            document.getElementById("spnGo").style.left = event.clientX - 10;
            document.getElementById("spnGo").style.top = event.clientY - document.getElementById("spnGo").offsetHeight - 12;
        }

#3. in css style sheet 

.btn
{
    font-weight: bold;
    font-size: small;
    cursor: hand;
    color: #a80961;
    border-top-style: none;
    background-repeat: repeat-x;
    font-family: Verdana;
    border-right-style: none;
    border-left-style: none;
    background-color: transparent;
    border-bottom-style: none;
}

No comments: