Κεντραρισμένο και απλό popup window

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

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

Απάντηση
Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Κεντραρισμένο και απλό popup window

Δημοσίευση από Joakim » 23 Φεβ 2010 17:07

by Joakim Liassides vol.3 Κεντραρισμένο και απλό popup window


Σε αυτό το βοήθημα θα δούμε πως μπορούμε να φτιάξουμε ένα απλό ΚΕΝΤΡΑΡΙΣΜΕΝΟ στην οθόνη μας popup window .


Καταρχάς δημιουργούμε ένα νέο document το οποίο θα είναι το popup window μας, και έπειτα το σώζουμε σε όποια μορφή εμείς θέλουμε , δηλαδή με κατάληξη είτε .html, .htm, .php κτλ.


Έπειτα ανοίγουμε την σελίδα όπου θέλουμε να εμφανίζετε το λινκ για το νέο παράθυρο και εισάγουμε τον παρακάτω κώδικα.

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

<script type="text/javascript">
<!--
function popup&#40;url&#41; 
&#123;
 var width  = 300;
 var height = 200;
 var left   = &#40;screen.width  - width&#41;/2;
 var top    = &#40;screen.height - height&#41;/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open&#40;url,'windowname5', params&#41;;
 if &#40;window.focus&#41; &#123;newwin.focus&#40;&#41;&#125;
 return false;
&#125;
// -->
</script>

<a href="javascript&#58; void&#40;0&#41;" 
   onclick="popup&#40;'onomawindow.html'&#41;">Onoma link, epikefalida</a>



Επεξήγηση κώδικα

Εδώ ορίζουμε τις διαστάσεις του popup window

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

var width  = 300;
 var height = 200;
Εδώ καθορίζουμε τις δυνατότητες και παραμέτρους του παραθύρου μας

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

 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';

Εδώ κάνουμε τις απαραίτητες αλλαγές για να εμφανίζετε το σωστό παράθυρο (το λίνκ σας και το όνομα αρχείου σας)

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

<a href="javascript&#58; void&#40;0&#41;" 
   onclick="popup&#40;'onomawindow.html'&#41;">Onoma link, epikefalida</a>

Tips:!

Μπορούμε να προσθέσουμε όσες φορές θέλουμε αυτό το σκριπτάκι στην ίδια σελίδα με διαφορετικές παραμέτρους και διαστάσεις , θα δουλεύει κανονικά.

Είναι τεσταρισμένο με Internet Explorer 7 , Opera, Google Chrome kai Mozilla

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Κεντραρισμένο και απλό popup window

Δημοσίευση από Joakim » 24 Φεβ 2010 07:28

malon den xriazete se kanenan afto e?:P

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

Κεντραρισμένο και απλό popup window

Δημοσίευση από dimsis » 24 Φεβ 2010 08:20

Κάπου θα χρειάζεται αλλά ζούμε εποχές που ζει και βασιλεύει το jquery και τα lightbox clones my friend .

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Κεντραρισμένο και απλό popup window

Δημοσίευση από geoki » 24 Φεβ 2010 12:08

Το να χρησιμοποίηση κάποιος popups την σήμερον ημέρα είναι για μένα ένα βήμα πίσω.
1.Παλιά τεχνολογία.
2. Υπάρχουν ομορφότεροι τρόποι για την ιδία δουλειά (lightboxes)
3. Oi browsers δε τα συμπαθούν
4. Σαν απλός χρήστης που κάνει κακή εντύπωση ένα site με popups. Ακόμη και κάποια δικά μου 5ετίας+ που βλέπω , δε τα αντέχω.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Κεντραρισμένο και απλό popup window

Δημοσίευση από Joakim » 24 Φεβ 2010 15:09

nai pedia simfono me afta pou lete... alla pistepste me gia enan arxario pou tora arxizi , tha ton voithouse poli na di enan tetio kodika kai na ton xrisimopioisi... tha katalavi kai vasikes domes enos script

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

Κεντραρισμένο και απλό popup window

Δημοσίευση από dimsis » 24 Φεβ 2010 22:04

Εννοείται. Και καλά κάνεις και το ψάχνεις.
Το να πας απευθείας σε jquery χωρίς να έχεις ιδέα από javascript είναι μεγάλο λάθος.

Η απάντηση μου όπως πήγαινε στο "malon den xriazete se kanenan afto e?". Από εκπαιδευτικής πλευράς καλά κάνεις και διαβάζεις και πειραματίζεσαι.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Κεντραρισμένο και απλό popup window

Δημοσίευση από Joakim » 24 Φεβ 2010 22:06

akrivos afto kano afti tin periodo kai giafto mirazome oti matheno kai sto forum... kapote epsaxna apelpismena tetia scriptakia kai otan ta evriska den i3era na ta xrisimopioiso :P

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

Κεντραρισμένο και απλό popup window

Δημοσίευση από dimsis » 24 Φεβ 2010 22:58

Η ομορφιά και το ταξίδι στη γνώση είναι όταν τα γράφεις μόνος σου, όχι τόσο όσο όταν βρίσκεις το έτοιμο.
Η έστω να καταλαβαίνεις τι κάνει το έτοιμο script και να μαθαίνεις από αυτό.

Joakim
Δημοσιεύσεις: 441
Εγγραφή: 06 Ιουν 2004 13:48

Κεντραρισμένο και απλό popup window

Δημοσίευση από Joakim » 25 Φεβ 2010 01:30

akrivos file opos ta les :)

kolomvos
Δημοσιεύσεις: 41
Εγγραφή: 02 Νοέμ 2005 14:26

Κεντραρισμένο και απλό popup window

Δημοσίευση από kolomvos » 18 Απρ 2010 01:14

Καλησπέρα, εγώ έχω μια εικόνα και θέλω όταν την πατάω να εμφανίζεται σαν pop up μια άλλη εικόνα. Αυτό πώς γίνεται; Προς το παρον το εχω καταφέρει μόνο πατώντας κείμενο..

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

<body>
<head>

<link rel='stylesheet' href='sample.css' type='text/css'>

</head>

<body>

<style type='text/css'>
.dragme &#123; cursor&#58; move &#125;
</style>

<script type='text/javascript'>

var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;

function movemouse&#40; e &#41; 
&#123;
  if&#40; isdrag &#41; &#123;
    dobj.style.left = nn6 ? tx + e.clientX - x &#58; tx + event.clientX - x;
    
dobj.style.top  = nn6 ? ty + e.clientY - y &#58; ty + event.clientY - y;
    return false;
  &#125;
&#125;

function selectmouse&#40; e &#41; &#123;
  var fobj       
= nn6 ? e.target &#58; event.srcElement;
  var topelement = nn6 ? "HTML" &#58; "BODY";

  while &#40;fobj.tagName != topelement && fobj.className != "dragme"&#41; 
&#123;
    fobj = nn6 ? fobj.parentNode &#58; fobj.parentElement;
  &#125;

  if &#40;fobj.className=="dragme"&#41; &#123;
    isdrag = true;
    
dobj = document.getElementById&#40;"styled_popup"&#41;;
    tx = parseInt&#40;dobj.style.left+0&#41;;
    ty = parseInt&#40;dobj.style.top+0&#41;;
    
x = nn6 ? e.clientX &#58; event.clientX;
    y = nn6 ? e.clientY &#58; event.clientY;
    
document.onmousemove=movemouse;
    return false;
  
&#125;
&#125;

function styledPopupClose&#40;&#41; &#123;
  document.getElementById&#40;"styled_popup"&#41;.style.display = "none";
&#125;


document.onmousedown=selectmouse;
document.onmouseup=new Function&#40;"isdrag=false"&#41;;
</script>

<div id='styled_popup' 
name='styled_popup' style='width&#58; 266px; height&#58; 142px; display&#58;none; position&#58; absolute; top&#58; 5px; left&#58; 40px;'>

<table width='266' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td></td>
<td><a href='javascript&#58;styledPopupClose&#40;&#41;;'>
<img height='12' width='12' src='images/x11_close.jpg' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background&#58; url&#40;"images/x11_body.gif"&#41; 
no-repeat top left; width&#58; 266px; height&#58; 129px;'>
<img src="Gift_Card.png">
</td></tr>
</table>
</div>

<input type='submit' 
onClick='document.getElementById&#40;"styled_popup"&#41;.style.display="block"' value=' Open '>


</body>
</html>
Εντάξει, το βρήκα.!

Άβαταρ μέλους
AlexGraphicD
Δημοσιεύσεις: 82
Εγγραφή: 23 Απρ 2010 20:14
Τοποθεσία: Αττική
Επικοινωνία:

Κεντραρισμένο και απλό popup window

Δημοσίευση από AlexGraphicD » 13 Ιουν 2010 03:02

Μπορει καποιος να μου πει, εχω καποιο λαθος στον λωδικα, γιατι δεν κεντραρεται οταν ανοιγει.

<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
params += ', top='+top+', left='+left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
//-->
</script>

Απάντηση

Επιστροφή στο “HTML και XHTML”

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

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