Tutorial Request: Drop-In Windows?

Steve · Feb 26, 2008

Can anyone recommend a tutorial for how to make a drop-in window?

First do I have the right name? What I am referring to is an
alternative to a pop-up box. It is basically a DIV that gets
dynamically displayed so that a rectangle gets laid over the content,
usually with a message inside, until the user clicks "ok" to make it
go away.

I would like to learn how to do this and:

- lock all of the HTML form elements on the screen while this is
happening
- gray out or darken the colors of the screen while the drop-in window
displays
- put buttons or input fields into the dorp-in window and see an
example of collecting
information from the drop-in window

I've seen some simple examples on the web, but I would like a tutorial
that explains all of the pieces.

Thanks much in advance for any info

SAM · Feb 26, 2008

Steve a écrit :

Can anyone recommend a tutorial for how to make a drop-in window?

I would like to learn how to do this and:

- lock all of the HTML form elements on the screen while this is
happening
- gray out or darken the colors of the screen while the drop-in window
displays

<html>
<button onclick="document.getElementById('hidder').style.display='block';">
hide</button>
<div id="hidder"
style="display:none;height:100%;width:100%;position:absolute;top:0;
background:black;color:white;filter:alpha(opacity=50);
-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;"
onclick="this.style.display='none';">click to close me</div>

- put buttons or input fields into the dorp-in window and see an
example of collecting
information from the drop-in window

<form action="#" id="hidder"
onsubmit="this.style.display='none';return false;">
<p>Name = <input name="Name"
onchange="if(this.value.length>0)document.forms[0][0].value=this.value">
<p>Firstname = <input name="First"
onchange="if(this.value.length>0)document.forms[0][1].value=this.value">
<p><input type=submit>

I've seen some simple examples on the web, but I would like a tutorial
that explains all of the pieces.

Most part of the purpose is made by CSS
- make a div positioned in absolute
- make this div to cover the viewport
with a background color and fix the opacity of this div

Put this div at the end of your html
(like that it will be in front of all what is in the page)

If you have only one form put it in this div

then reveal or hide this div.
show :
onclick="document.getElementById('hidder').style.display='block';"
hide :
onclick="document.getElementById('hidder').style.display='';"

Then the problem will to slide this div on the correct space
(if the page is higher than height of a small window, say about 550 px)

4 dynamic drop downs, any tutorial or link?	3	Sep 10, 2007
Processing in Python help	0	Aug 31, 2022
Java Tutorial, Concurrency trail	3	Feb 17, 2011
Tutorial challenge program help	19	Sep 9, 2009
tutorial Request	3	Jun 12, 2006
Python Tutorial on Multithreading	3	Feb 21, 2011
* operator in python tutorial	4	Jan 20, 2010
How can I fix my pattern coding error in c++	0	Mar 19, 2023

Tutorial Request: Drop-In Windows?

Steve

SAM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads