Αναδυόμενο (popup) παράθυρο με div layer & φόρμα επικοινωνία

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Αναδυόμενο (popup) παράθυρο με div layer & φόρμα επικοινωνία

Δημοσίευση από dimsis » 04 Οκτ 2008 00:20

Ο κώδικας:

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Παράθυρο div</title>
<style type="text/css">
body &#123;
	font-family&#58;Arial, Helvetica, sans-serif;
	font-size&#58; 0.8em;
	line-height&#58;1.2em;
	background-color&#58;#ccc;
&#125;
.popup_style &#123;
	position&#58;absolute;
	left&#58;320px; /* Πόσο κενό σε pixels θα αφήσει από αριστερά πριν εμφανίσει το "παράθυρο" */
	top&#58;50px; /* Πόσο κενό σε pixels θα αφήσει από πάνω πριν εμφανίσει το "παράθυρο" */
	width&#58;400px;  /* Πλάτος του popup div */
	height&#58;350px; /* Ύψος του popup div */
	padding&#58;10px 0; /* να έχει και κανένα κενό από το περιθώριο */
	visibility&#58;hidden; /* προεπιλογή είναι κρυμμένο */
&#125;
/* Στοιχεία φόρμας */
form &#123;
	margin&#58;0px;
	padding&#58;0px
&#125;
label &#123;
	float&#58; left;
	text-align&#58; right;
	margin-right&#58; 10px;
	width&#58; 100px;
&#125;
#contactForm input, #contactForm textarea, #contactForm select &#123;
	width&#58; 250px;
	font-size&#58; 0.8em;
&#125;
#contactForm fieldset &#123;
	border&#58;2px solid #003399;
	background-color&#58;#ffffff;
&#125;
.popup_style #title &#123;
	font-size&#58;1.2em;
	font-weight&#58;bold;
	color&#58;#fff;
	background-color&#58;#003399;
	width&#58;386px;
	padding&#58;7px;
&#125;
/* άλλα */
.center &#123;
	margin&#58;0 auto;
	text-align&#58;center;
&#125;
#cc &#123;
	color&#58;#999999;
	font-family&#58;Verdana, Arial, Helvetica, sans-serif;
	font-size&#58;0.7em;
	text-align&#58;right;
&#125;
</style>
<!-- κώδικας για απόκρυψη και εμφάνιση του div παραθύρου μας -->
<script type="text/javascript">
function deixe&#40;&#41;&#123;
document.getElementById&#40;"popid"&#41;.style.visibility="visible";
&#125;
function krypse&#40;&#41;&#123;
document.getElementById&#40;"popid"&#41;.style.visibility="hidden";
&#125;

</script>
</head>
<body>
<p class="center"><a href="#" onclick="deixe&#40;&#41;">Κάντε κλικ για εμφάνιση της φόρμας επικοινωνίας</a></p>
<p>&nbsp; </p>
<p id="cc">By DimSis</p>
<p>&nbsp; </p>
<div class="popup_style" id="popid">
  <div id="title" class="center">Φόρμα επικοινωνίας</div>
  <!-- το legend δεν φαίνεται καλά όποτε έχει χρώμα φόντου οπότε καλύτερα div για τον τίτλο -->
  <form method="post" action="#" id="contactForm">
    <fieldset>
    <label for="Name" id="Name">Ονοματεπώνυμο&#58;</label>
    <input type="text" name="Name" />
    <br />
    <label for="Email" id="Email">Email&#58;</label>
    <input type="text" name="Email" />
    <br />
    <label for="City" id="City">Πόλη&#58;</label>
    <input type="text" name="City" />
    <br />
    <label for="Message" id="Message">Μήνυμα&#58;</label>
    <textarea name="Message" rows="10" cols="10"></textarea>
    <br />
    <div class="center">
      <button type="button" id="Submit" onclick="document.ContactForm.submit&#40;&#41;">Αποστολή</button>
      <button type="button" id="Close" onclick="krypse&#40;&#41;" style="margin-left&#58;20px">Κλείσιμο</button>
    </div>
    </fieldset>
  </form>
</div>
</body>
</html>

Παράδειγμα χρήσης:
http://www.avadaz.com/playground/popupdiv/

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

Αναδυόμενο (popup) παράθυρο με div layer & φόρμα επικοινωνία

Δημοσίευση από p_pan » 04 Οκτ 2008 01:07

euxaristo auto akribos ecanxa..
Αγράματος...

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης