Popup Box in ASP. NET Using VB.NET

Here, we will see a popup box that will be display over the page.
  • 4069

Here, we will see a popup box that will be display over the page.

Popup box is important to display new or notable pieces of information to your visitors. This also has the option to delete over the title bar to make invisible. Hold your mouse down over the title bar of the box to drag it.

The following are some easy steps.

Step-1:  Create a simple application in Visual Studio.


Now start work on the default .aspx page

First, add the following script code with style on the page in head section:

Default .aspx:

 <head runat="server">

   <script type="text/javascript">

       var ns4 = document.layers

       var ie4 = document.all

       var ns6 = document.getElementById && !document.all

       var dragswitch = 0

       var nsx

       var nsy

       var nstemp


       function drag_dropns(name) {

           if (!ns4)


            temp = eval(name)

            temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

            temp.onmousedown = gons

            temp.onmousemove = dragns

            temp.onmouseup = stopns



       function gons(e) {


            nsx = e.x

            nsy = e.y


       function dragns(e) {

           if (dragswitch == 1) {

                temp.moveBy(e.x - nsx, e.y - nsy)

               return false




       function stopns() {




       function drag_drop(e) {

           if (ie4 && dragapproved) {

                crossobj.style.left = tempx + event.clientX - offsetx

                crossobj.style.top = tempy + event.clientY - offsety

               return false


           else if (ns6 && dragapproved) {

                crossobj.style.left = tempx + e.clientX - offsetx + "px"

                crossobj.style.top = tempy + e.clientY - offsety + "px"

               return false




       function initializedrag(e) {

            crossobj = ns6 ? document.getElementById("showimage") : document.all.showimage

           var firedobj = ns6 ? e.target : event.srcElement

           var topelement = ns6 ?"html" : document.compatMode && document.compatMode !="BackCompat" ?"documentElement" : "body"

           while (firedobj.tagName != topelement.toUpperCase() && firedobj.id != "dragbar") {

                firedobj = ns6 ? firedobj.parentNode : firedobj.parentElement



           if (firedobj.id =="dragbar") {

                offsetx = ie4 ? event.clientX : e.clientX

                offsety = ie4 ? event.clientY : e.clientY


                tempx = parseInt(crossobj.style.left)

                tempy = parseInt(crossobj.style.top)


                dragapproved = true

                document.onmousemove = drag_drop



        document.onmouseup = new Function("dragapproved=false")

       function hidebox() {

            crossobj = ns6 ? document.getElementById("showimage") : document.all.showimage

           if (ie4 || ns6)

                crossobj.style.visibility = "hidden"

           else if (ns4)

                document.showimage.visibility = "hide"



   <style type="text/css">









Now add the following code to the body section which contains one image and some text.


   <form id="form1" runat="server">


    This section is to give suggestion or ideas to improve community.

       <br />

        Ideas page

This page has the below link.


        This page contains the following tabs and a link.

1.     Recently Ideas

2.     Most voted

3.     Implemented


       <br />


5.     Approved


       <br />




Submit a new idea/suggestion â€" From this link we can submit a new idea.

       <br />

        This link will be redirect to the create idea.



Title â€" In the title field we write a title of new idea.

       <br />

        Description â€" This field contains detail about new idea.

       <br />

        Submit â€" To submit the idea information.


1.     Recently Ideas Tab

This tab contains the most recently (new) ideas.


       <br />

        Vote now â€" To give the vote and also displays total vote if you have already given vote. You cannot give vote second time.

       <br />

        Paging â€" To displays more ideas.

Spam â€" If there is no need to implement the ideas mark as spam.

Duplicate â€" mark as duplicate if any other idea exists as the same.


This link is used to see the detail of idea such as title, description, vote, comment etc.<br />

        This link will be redirect to the Idea Detail page.

This page contains four sections.

1.     Idea detail

2.     Comment this idea


4.     Rank section


   <div id="showimage"

           style="position:absolute;width:250px;left:250px;top:224px;height: 92px;">


<table border="0" width="250" bgcolor="#000080" cellspacing="0" cellpadding="2"

           style="height: 89px">


   <td width="100%"><table border="0" cellspacing="0" cellpadding="0"

           style="height: 50px; width: 96%">


       <td id="dragbar" style="cursor:hand;cursor:pointer" width="100%"onMousedown="initializedrag(event)">

           <ilayer width="100%" onSelectStart="return false">

           <layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)"onMouseout="dragswitch=0">

               <font face="Verdana"

       color="#FFFFFF"><strong><small>&nbsp;PopUp Box</small></strong></font></layer></ilayer></td>

       <td style="cursor:hand"><a href="#" onClick="hidebox();return false">

           <img src="Image/close.gif"

       height="14px" border=0 style="width: 18px"></a></td>



       <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">



           <img class="style1" src="Image/usa-west-road_small.jpg" />

           <br />

            Here is the example of the popup box.

           <br />


           <a href="http://www.c-sharpcorner.com/">Rohatash Kumar</a></td>










Step -4:



Now run the application.


Hold your mouse down over the title bar of the box to drag it over the page.



To delete popup box click on the delete image over the title bar to make invisible.

Note: You can see a demo of this article by downloading this application.


More Articles

© 2020 DotNetHeaven. All rights reserved.