Pop up παραθυράκι μέσα στην ίδια την σελίδα!

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

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

Απάντηση
Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 09 Μαρ 2006 17:36

Πως μπορώ να βάλω το εξείς:

Να ανοίγει ένα pop-up παραθυράκι, αλλα όχι σε νέο window, αλλά μέσα στην ίδια την σελίδα, και πάνω δεξιά [ή κάπου αλλού] να έχει το "Χ"..

Άβαταρ μέλους
iffor
Δημοσιεύσεις: 778
Εγγραφή: 14 Μάιος 2005 01:19
Τοποθεσία: Παράδεισος
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από iffor » 09 Μαρ 2006 18:14

:o :o wow! έχεις κάποιο παράδειγμα να δώσεις για να δούμε ακριβώς σε τι αναφέρεσαι;
μια νέα αρχή ξεκίνησε...
ένας καινούριος δρόμος άνοιξε...
redpanda.gr

emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από emphasy » 10 Μαρ 2006 17:02

http://www.megaupload.com/ πρέπει να εννοεί κάτι τέτοιο, έχει κάνει ένα παρόμοιο βοήθημα και ο skeftomilos, look here... live example...

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 11 Μαρ 2006 00:31

Αυτό εννοώ, αλλά θέλω να βάλω εικόνα στο popup!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από skeftomilos » 11 Μαρ 2006 05:08

Υπάρχει ένα σχετικό script στο dynamicdrive:

-Image Thumbnail Viewer

Δεν είναι πολύ σύγχρονο ούτε έχει πολύ καλής ποιότητας κώδικα αλλά κουτσά στραβά τη δουλειά του την κάνει. :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από ThyClub » 11 Μαρ 2006 08:06

Εδώ έχω ενα πρόχειρο παράδειγμα. Απλά παίζει με την ιδιότητα display των DIV. Μπορείς να δώσεις και δυνατότητα drag με το toolman kit :wink:
Συνημμένα
test.zip
Inline Pop
(710 Ψηφιολέξεις) Μεταφορτώθηκε 479 φορές

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 11 Μαρ 2006 10:03

ThyClub, αυτό ακριβώς θέλω, αλλα:

Να ανοίγει μόνο του, και να μπορώ να το κάνω move!

[για το move δεν καίγωμαι, απλά αν γίνετε, διότι δεν κατάβα τπτ απο το site που έλεγες να πάω!]

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από ThyClub » 11 Μαρ 2006 10:37

Λοιπόν λίγο πιο πάνω ο titakos έδωσε ενα live example. Απλά θα πρέπει να πάρεις τον κώδικα του drag:

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

 <script type="text/javascript">
      var dragged
      var offsetX
      var offsetY

      window.onload = function&#40;&#41; &#123;
        document.getElementById&#40;"box"&#41;.onmousedown = function&#40;e&#41; &#123;
          e = e || window.event
          if &#40;e.button == 2&#41; return
          dragged = this
          offsetX = e.screenX - this.offsetLeft
          offsetY = e.screenY - this.offsetTop
          return false
        &#125;

        document.onmousemove = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          e = e || window.event
          dragged.style.left = &#40;e.screenX - offsetX&#41; + "px"
          dragged.style.top = &#40;e.screenY - offsetY&#41; + "px"
          return false
        &#125;

        document.onmouseup = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          dragged = null
        &#125;
      &#125;
    </script>
και να τον αναμίξεις με τον δικό μου απομακρύνοντας το display:none:

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

<script type="text/javascript">
<!--
function showPop&#40;popID&#41;&#123;
var popup=document.getElementById&#40;popID&#41;;
popup.style.display='';
&#125;

function hidePop&#40;popID&#41;&#123;
var popup=document.getElementById&#40;popID&#41;;
popup.style.display='none';
&#125;

var dragged
      var offsetX
      var offsetY

      window.onload = function&#40;&#41; &#123;
        document.getElementById&#40;"pop"&#41;.onmousedown = function&#40;e&#41; &#123;
          e = e || window.event
          if &#40;e.button == 2&#41; return
          dragged = this
          offsetX = e.screenX - this.offsetLeft
          offsetY = e.screenY - this.offsetTop
          return false
        &#125;

        document.onmousemove = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          e = e || window.event
          dragged.style.left = &#40;e.screenX - offsetX&#41; + "px"
          dragged.style.top = &#40;e.screenY - offsetY&#41; + "px"
          return false
        &#125;

        document.onmouseup = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          dragged = null
        &#125;
      &#125;


//-->
</script>

<style>
<!--
#pop&#123;
	background-color&#58;#f5f5f5;
	width&#58;400px;
	position&#58;absolute;
	border&#58;1px solid Silver;
	
&#125;

#titleBar&#123;
	background-color&#58;Navy;
	color&#58;white;
	width&#58;400px;
	text-align&#58;right;
	cursor&#58;move;
&#125;

#titleBar a&#123;
	color&#58;white;
	text-decoration&#58;none;
	padding&#58;2px;
	font-weight&#58;bold;
&#125;
-->
</style>


<div id="pop" >
<div id="titleBar"><a href="#" onClick="hidePop&#40;'pop'&#41;">X</a></div>
An pas sto <a href="http&#58;//tool-man.org/">http&#58;//tool-man.org/</a> mporeis na katevaseis to toolman kit kai na kaneis ayto to para8yro 
moveable. Etsi mporeis na exeis ametrhta inline popups kai na ta xrhsimopoihseis opws 8eleis esy
</div>

<a href="#" onClick="showPop&#40;'pop'&#41;">Show</a>

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 11 Μαρ 2006 12:16

Όντως, παίδες έπιασε!

Ειλικρινά σας χιλιο-ευχαριστώ!

κάνω μερικές τροποποιήσεις και θα σας δώσω το νέο script!

==========EDIT<<<<<<((((===========

Εφ' όσων είναι auto-pop-up, δεν χρειαζώμαστε το show!!! ;-)

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

<script type="text/javascript">
<!--
function showPop&#40;popID&#41;&#123;
var popup=document.getElementById&#40;popID&#41;;
popup.style.display='';
&#125;

function hidePop&#40;popID&#41;&#123;
var popup=document.getElementById&#40;popID&#41;;
popup.style.display='none';
&#125;

var dragged
      var offsetX
      var offsetY

      window.onload = function&#40;&#41; &#123;
        document.getElementById&#40;"pop"&#41;.onmousedown = function&#40;e&#41; &#123;
          e = e || window.event
          if &#40;e.button == 2&#41; return
          dragged = this
          offsetX = e.screenX - this.offsetLeft
          offsetY = e.screenY - this.offsetTop
          return false
        &#125;

        document.onmousemove = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          e = e || window.event
          dragged.style.left = &#40;e.screenX - offsetX&#41; + "px"
          dragged.style.top = &#40;e.screenY - offsetY&#41; + "px"
          return false
        &#125;

        document.onmouseup = function&#40;e&#41; &#123;
          if &#40;!dragged&#41; return
          dragged = null
        &#125;
      &#125;


//-->
</script>

<style>
<!--
#pop&#123;
   background-color&#58;#f5f5f5;
   width&#58;400px;
   position&#58;absolute;
   border&#58;1px solid Silver;
   
&#125;

#titleBar&#123;
   background-color&#58;Navy;
   color&#58;white;
   width&#58;400px;
   text-align&#58;right;
   cursor&#58;move;
&#125;

#titleBar a&#123;
   color&#58;white;
   text-decoration&#58;none;
   padding&#58;2px;
   font-weight&#58;bold;
&#125;
-->
</style>


<div id="pop" >
<div id="titleBar"><a href="#" onClick="hidePop&#40;'pop'&#41;">X</a></div>
An pas sto <a href="http&#58;//tool-man.org/">http&#58;//tool-man.org/</a> mporeis na katevaseis to toolman kit kai na kaneis ayto to para8yro
moveable. Etsi mporeis na exeis ametrhta inline popups kai na ta xrhsimopoihseis opws 8eleis esy
</div>

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από ThyClub » 11 Μαρ 2006 12:40

Ναι αλλά αν το κλείσει κάποιος χωρίς το show πως θα το ξαναεμφανίσεις?

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 11 Μαρ 2006 13:23

Το θέλω σαν pop-up! θα εμφανίζει κάτι [ένα μύνημα] και μετά θα το κλείνουν!

Θα τοπ βάζω ώστε μερικοί να βλέπουν και τους μερικούς κανόνες, πριν απαντήσουν! ;-)

Και κάτι άλλο,!

Πως βάζω html μέσα σε php?

EDIT:

Λάθος η ερώτηση, δεν μου χρειάζετε διότι έτσι θα φένετε σε όλους το μύνημα, και όχι μόνο στα μέλη!

Επείσης, γίνετε αυτό το box, να είναι ή στο κέντρο της σελίδας, ή να ακολουθεί το mouse?

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 15 Μαρ 2006 15:04

Επιτέλους, το βρήκα!

Κάτι σαν αυτό το popup [βγαίνει πολύ καλα με FF]

http://www.in.gr/auto/news/article.asp?lngEntityID=6166

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από skeftomilos » 16 Μαρ 2006 00:44

Μοιάζει με συνδυασμό JavaScript + Flash. Αν πω ότι με ενθουσίασε σου πω ψέματα. :-?
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 16 Μαρ 2006 13:35

Βασικά μου άρεσε, απλά εκεί θα έβαζα εικόνα!

Άβαταρ μέλους
JimKarvo
Δημοσιεύσεις: 497
Εγγραφή: 23 Ιούλ 2005 17:10
Τοποθεσία: Εξάρχεια!
Επικοινωνία:

Pop up παραθυράκι μέσα στην ίδια την σελίδα!

Δημοσίευση από JimKarvo » 05 Απρ 2006 19:01

Ξέρει κανείς πως θα το κάνω να βγαίνει στο κέντρο της σελίδας?

ή να ακουλουθεί το mouse στην κάθετη στήλη? [όχι και όριζοντια και κάθετα [δλδ όπου πάει το Mouse]]!?

Απάντηση

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

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

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