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.

Step-2:

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">
<title></title>

   <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)

                return

            temp = eval(name)

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

            temp.onmousedown = gons

            temp.onmousemove = dragns

            temp.onmouseup = stopns

        }

 

       function gons(e) {

            temp.captureEvents(Event.MOUSEMOVE)

            nsx = e.x

            nsy = e.y

        }

       function dragns(e) {

           if (dragswitch == 1) {

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

               return false

            }

        }

 

       function stopns() {

            temp.releaseEvents(Event.MOUSEMOVE)

        }

 

       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"

        }

</script>

   <style type="text/css">

        .style1

        {

           width150px;

           height100px;

        }

   </style>

 

Step-3

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

 <body>

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

   <div>

    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

4.    

       <br />

        Rejected

5.     Approved

6.    

       <br />

        Contributors

 

Link-1

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.

Link-1

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

3.     Comments

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">

 <tr>

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

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

     <tr>

       <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>

     </tr>

     <tr>

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

 

&nbsp;

           <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>

     </tr>

   </table>

   </td>

 </tr>

</table>

</div>

   </div>

   </form>

</body>

Step -4:

  popup1.gif

  Image1

Now run the application.

Step-5:

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

popup2.gif
 

Image2

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.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.