Pop-Up Window

Page 1 of 1

6 Replies - 5266 Views - Last Post: 03 July 2005 - 12:47 AM

#1 Pink Bubbles  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 13-May 05

Pop-Up Window

Posted 13 May 2005 - 07:38 AM

Hi there!Im kinda new to using HTML, and need help creatintg a pop-up window.!It should do the following: -
a pop-up window to help users understand how they should fill-in the email field of the form.
thanx
Is This A Good Question/Topic? 0
  • +

Replies To: Pop-Up Window

#2 zakary  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 27
  • View blog
  • Posts: 427
  • Joined: 15-February 05

Re: Pop-Up Window

Posted 13 May 2005 - 08:15 AM

<html>
<head>
<title>Pop Up</title>

<style type="text/css">
#popupBox{
position: absolute;
top: 35px;
left: 10px;
border: solid 1px #000000;
background-color: #FFFF99;
visibility: hidden;
}
</style>

<script language="Javascript">
function show_it(){
document.all.popupBox.style.visibility = "visible";
}

function hide_it(){
document.all.popupBox.style.visibility = "hidden";
}
</script>
</head>

<body>
<a href="java script://" onmouseover="show_it()" onmouseout="hide_it()">Link for pop-up here</a>

<div id="popupBox">
<p>This is the info you want displayed in the pop-up window</p>
<p>This is the next line of the pop-up</p>
</div>

</body>
</html>
Was This Post Helpful? 0
  • +
  • -

#3 Pink Bubbles  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 13-May 05

Re: Pop-Up Window

Posted 13 May 2005 - 09:19 AM

Thanx..
i linked that coding into my own coding, and i cldt get it to work...
can u help?its kinda messed up, my information is all over the page.....HELP!!
heres the coding...
thanx

<html>
<head><title>Comments</title></head>
<h1><b><center>Your Comments</h1></b><br>

<body bgcolor="#33ccff" text="red" link="#0000f">
<h2><b><Center>Personal Details</h2></b><br>
<form method="post" action="mailto:L.Rizvi@wmin.ac.uk"
                   enctype="text/plain">

 <style type="text/css">
#popupBox{
position: absolute;
top: 35px;
left: 10px;
border: solid 1px #000000;
background-color: #FFFF99;
visibility: hidden;
}
</style>

<script language="Javascript">
function show_it(){
document.all.popupBox.style.visibility = "visible";
}

function hide_it(){
document.all.popupBox.style.visibility = "hidden";
}
</script>
</head>

<body>
<a href="javascript://" onmouseover="show_it()" onmouseout="hide_it()">Link for pop-up here</a>

<div id="popupBox">
<p>This is the info you want displayed in the pop-up window</p>
<p>This is the next line of the pop-up</p>
</div>



<center>

<table border=1 width=60%>
<tr>
<td>
<font color="red">
Please enter your details below. Click the send button once completed.<p>
</font>

<table border=1>

<tr>
<td>
<font color="red">
Title:
</font>
</td>

<td colspan=5>
<font color="red">
<input type="checkbox" name="Title" value="Mr">Mr <input type="checkbox" name="Title" value="Mrs">Mrs <input type="checkbox" name="Title" value="Miss">Miss <input type="checkbox" name="Title" value="Ms">Ms
</font>
</td>
</tr>

<tr>
<td>
<font color="red">
First Name:
</font>
</td>

<td>
<input type="text" name="fname" size=20 value="">
</td>

<td>
<font color="red">
Initial:
</font>
</td>

<td>
<input type="text" name="initial" size=1 value="">
</td>

<td>
<font color="red">

Last Name:
</font>
</td>

<td>
<input type="text" name="lname" size=20 value="">
</td>
<tr>

<td>
<font color="red">
E-mail:&nbsp;
<input type="text" name="E-mail" size="30">
</font>
</td>
</tr>


<td>
<tr>
<font color="red">
Please enter any comments below about our Web site on how to make improvemnets or just general commits. This is for our information and records
<textarea name="feedback" rows="10" cols="50"></textarea>
</td>
</tr>


<tr>
<td>
<td colspan=5>
<font color="red">
Please rate our Web site

<br>
<br>

 <input type="radio" name="rate" value="Classy">Classy
 <input type="radio" name="rate" value="Interesting">Interestin
 <input type="radio" name="rate" value="Dull">Dull
 <input type="radio" name="rate" value="Boring">Boring<br>

<br>

 <input type="radio" name="rate" value="Very good">Very Good
 <input type="radio" name="rate" value="Good">Good
 <input type="radio" name="rate" value="Bad">Bad
 <input type="radio" name="rate" value="Very Bad">Very Bad<br>
</font>
</td>
</tr>

<td>
<tr>
<font color="red">
Would you like to receive more information

 <input type="checkbox" name="Like"
        value="" ><br>
</font>
</td>

<td>
<td colspan=5>
<font color="red">
If so, please enter a valid e-mail address 
<input type="text" name="E-mail" size="30">
</font>
</td>

<td>
<font color="red">
Create a <b>Password</b> to be able to access the valid e-mail address
 <input type="password" name="Password"
        size="20" VALUE="">
</font>
</td>
</tr>

<tr>
<td>
<font color="red">
Form operations:
</font>

</td>

<td>
<input type="submit" value="Send">
</td>

<td colspan=3>
<input type="reset" value="Reset">
</td>
</tr>

</font>
</form>
</td>
</tr>
</table>

</center>
</table>
<hr>
</font>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 zakary  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 27
  • View blog
  • Posts: 427
  • Joined: 15-February 05

Re: Pop-Up Window

Posted 13 May 2005 - 11:03 AM

position: absolute;
top: 35px;
left: 10px;

by changing these values you can move the box. as far as it not working, the code works fine in my browser, check your internet options or up date you internet browser. It should work fine.

if you change the above code to:
position: absolute;
top: 175px;
left: 350px;

the box will show under the Link for pop-up here wording
Was This Post Helpful? 0
  • +
  • -

#5 bug  Icon User is offline

  • Got Bug?
  • member icon

Reputation: 0
  • View blog
  • Posts: 1,010
  • Joined: 24-April 05

Re: Pop-Up Window

Posted 14 May 2005 - 12:12 AM

If I'm understanding what you're lookin for and you can't get the code that zakary posted to work give this a shot (it's what I use and it saves me loads of time):

<a href="#"onclick="MyWindow=window.open('http://www.ADDY TO POPUP','MyWindow1','toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=yes,resizable=no,width=300,height=300,left=50,top=50'); return false;">LINK HERE</A>


1. Create the page for what you want to appear in the popup.
(for examples sake we'll call it emailexplination.html )
2. Save that page, upload to your server.
3. Then on the form that you want the link to that popup on simply paste in that code snippet above.
4. Edit the http://www.ADDY TO POP UP to whatever the link to the page is that you want to appear in the popup (in this case it would be something like http://www.yoursite....plination.html)
5. Change LINK HERE to whatever text you'd like to appear in it, or you can even insert an image tag just like a regular link.

The attributes you'll most likely want to change on the above code are as follows:
width= (this controls the width of the popup)
height= (this controls the height of the popup)
left=/top= (these two will help you position the popup on the screen)

If you are intrested in the deffinitons of the other attributes just let me know and I'll post them for you. Hope this helps a little, if it doesn't make sense to you or you need further help on it please let me know as it's late here and I'm sure I could be making no sense at all :) LOL!
Was This Post Helpful? 0
  • +
  • -

#6 tlak83  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 02-July 05

Re: Pop-Up Window

Post icon  Posted 02 July 2005 - 11:20 PM

:P hey there is a program tha helps you make pupups easily if you cant get them to work is called wisepupup just google for it you have a 30 use trial
Was This Post Helpful? 0
  • +
  • -

#7 Amadeus  Icon User is offline

  • g+ + -o drink whiskey.cpp
  • member icon

Reputation: 247
  • View blog
  • Posts: 13,505
  • Joined: 12-July 02

Re: Pop-Up Window

Posted 03 July 2005 - 12:47 AM

The code supplied by bug will ensure that popups appear...
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1