ARTICLE

Popup Box in ASP. NET

Posted by Rohatash Kumar in Articles | ASP.NET using VB.NET on June 03, 2011

Tags: asp.net, asp.net tutorials, asp.net articles, popup box in asp.net, popup box

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

Tweet
1368
0

Download Files:

Popup Box.zip

Reader Level: Beginner

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>

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>

.style1

{

width: 150px;

height: 100px;

}

</style>

Step-3

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

 <body>

<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

<br />

Rejected

5. Approved

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

<font face="Verdana"

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

<img src="Image/close.gif"

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

</tr>

<tr>

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

</form>

</body>

Step -4:

Now run the application.

Image1

Step-5:

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

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.

post comment

TOP LEADERS

View All

TRENDING UP

Use of Excel.AddUnique Method in MS Excel to Display Unique Numbers in Ranges Use of PPT.ApplyTheme.BackgroundStyle in MS PowerPoint 2010 to Apply Themes & Backgrounds Use of PPT.InteractWithChartLocation in MS PowerPoint 2010 to Change Chart Locations Simple Web Report With Pivot Table and Linq to Entity Print A Chart into a Byte Stream Using New Audio Player Class With VB.NET Display Top Ten Percent Item and bottom Ten percent Item Use of PPT.ConvertTextToSmartArt in MS PowerPoint 2010 to Convert Text into SmartArt How to Find Backup Folder Data Location Using GetSpecialLocation in MS OneNote 2010 Calendar Control In WPF

View All

Popup Box in ASP. NET

Related Articles