Kendo: Anpassung meines Popup - Fensters

Hallo,

ich würd gern mit hilfe von JS ein Fenster (am besten Browserunabhängig) beim öffnen zentrieren.

Dabei hilft mir die window.open() Funktion mit den Befehlen "screenX" und "screenY" aber nicht.

Kann mir da jemand weiterhelfen?

Desweiteren würd ich noch gern die Optik meines Popups verändern (andere Farbe des Rahmens, anderer Close-button,...)

Gibts dazu was in Selfhtml (hab dazu leider nichts gefunden), oder kennt ihr ne andere, empfehlenswerte Seite zu diesem Thema?

Danke schön.

Grüße,
Kendo

  1. Hallo Kendo,

    Zu deinem Problem kann ich dir leider nicht helfen aber hast du dir schon mal folgendes überlegt:

    1. Wollen es deine Besucher dass du ihnen ein neues Fenster mitten rein setzt, und warscheinlich so einiges zudeckst was sie gerade benutzen wie Newsticker, Messanger, andere Programme?
    2. Wenn es mittig ist und jemand zwei Bildschirme gleichzeitig benutzt dann bekommt er das Fenster wo hin?
    3. Wenn jemand JavaScript abgeschalten hat was dann?
    4. Wenn jemand PopUps unterdrückt, weil ihn die ständigen BannerWerbungen nerven was dann?

    Ich will damit sagen dass die Idee mit dem Popup Fenster nicht gerade die beste ist.

    Und zu deinem zweiten Problem mit dem verändern der Schaltflächen des Browsers. Ich würde dir nie erlauben was an meinem Opera zu machen. Auch an den Fenstern die mein Betriebssystem zeichnet würde ich dir nie erlauben was zu fummeln. Außerdem macht das jeder Windowmanager irgendwie anders. Denk auch daran dass viele mit Tabs surfen, die sich dann Browserfüllend öffnen anstatt deine Größe zu erlauben.

    Grüße
    Jeena Paradies

    --
    Bambergs Fasching - nur ein großer (Werbe-)Flop?
    http://jeenaparadies.de/artikel/fasching/
    Jeenas Bannertauschportal; selbstgemacht ;-)
    http://jeenasbannerbude.de
  2. Hallo Kendo,

    ich würd gern mit hilfe von JS ein Fenster (am besten Browserunabhängig) beim öffnen zentrieren.

    Du meinst "mitten im Bildschirm"? Das solltest du am Besten noch vorm öffnen des Fensters dann machen bzw. berechnen. Dieser Script hier funktioniert bei mir mit IE sowie Opera:

    var breite = 250; // Breite deines Fensters
     var hoehe = 100; // Hoehe des fensters
     links = eval((screen.width - breite) / 2); oben = eval((screen.height - hoehe) / 2);

    var fenster = window.open("URI-deines-Fensters", "Fenstername", "width="+breite+",height="+hoehe+",top="+oben+",left="+links+");
     fenster.focus()

    Lässt sich natürlich beliebig variieren. Was hier gemacht wird? Die Bildschirmbreite bzw. Hohe lässt sich mit screen.width bzw. screen.height rausbekommen. Jetzt musst du nur von dieser die BReite bzw. höhe des Fensters abziehen und erhälts den Freiraum in der entsprechenden Dimension. Den teilst du durch 2 und fertig. Diese ganze Bereichnung nochmal durch die Funktion eval() zu schicken ist schwachsinn, aber was solls ;-)

    Dabei hilft mir die window.open() Funktion mit den Befehlen "screenX" und "screenY" aber nicht.

    richtig. Im 3.parameter von window.open() ist nichts dafür vorgesehen. Also musst du es ausrechnen und die startkoordinaten dann dynamisch einfügen. DAs habe ich dir oben gezeigt.

    Desweiteren würd ich noch gern die Optik meines Popups verändern (andere Farbe des Rahmens, anderer Close-button,...)

    Nö. Allein schon aus dem Grund, weil nicht jeder Depp windows hat und entsprechend - schau dir einfach mal einen Screenshot von OS X an und sage mir anschließend, warum du das "X" nicht formatieren kannst, den rahmen nicht... denn dort willst du dann was ganz anderes...

    Was du machen kannst, ist, dem 3.parameter von open() "fullscreen=yes" zuzufügen und das fenster unbedingt mit width= und height= - wie in meinem beispiel - zu verändern, ansonsten bekommst du ein fenster, was ohne dem Fensterrahmen sowie der titelleiste und dem ganzen schnickschnack den vollen Bildschirm ausfüllt - so füllt es nur die von dir ausgegebene stelle aus.
    Ich rate es aber nicht, da 1. nur der IE es richtig interpretiert und 2. es für den Anwender sehr sehr umständlich ist und viele das fenster nicht mehr schließen können,...

    Wenn du's dann natürlich hast, kannst du dir da drin zusammenbauen, was du willst, z.B. eine "selbstformatierte" Titelleiste und so ein zeugs. Vergesse aber auf keinem Fall irgendetwas wie "Fenster schließen" oder so ein "X" wie Windows es bei seinen Fensterchen bietet.

    WAuWau

    --
    +-- WauWau Selfcode
    |   ss:) zu:) ls:< fo:~ de:] va:) ch:° n4:# rl:( br:< js:| ie:% fl:| mo:|
    +-- WauWau Nostalgie
    |   Die Bedeutung des Bellens ("WauWau") liegt ursprünglich darin, dass ein
    |   Gruppenfremder gewarnt oder ihm Alarm signalisiert wird.
    +-- WauWau Heute
    |   Heutzutage ist die Bedeutung von "WauWau": Achtung, hier kommt "WauWau"!
    |   Die Bedeutung liegt hierbei auf den "Wau", und zwar auf beiden.
    +-- WauWau E-Mail
    |   Coming soon...
    1. Vielen Dank soweit.

      Es leuchtet auch ein, und macht sinn.
      Leider hab ich mit der Implementierung noch Probleme.

      Ich definiere Breite und Höhe meines Fensters

      var breite = 250; // Breite deines Fensters
       var hoehe = 100; // Hoehe des fensters

      Ich berechne die Platzhalter links und oben

      links = eval((screen.width - breite) / 2); oben = eval((screen.height - hoehe) / 2);

      Jetzt müsste doch ein Funktionsaufruf kommen, oder?

      var fenster = window.open("URI-deines-Fensters", "Fenstername", "width="+breite+",height="+hoehe+",top="+oben+",left="+links+");
       fenster.focus()

      Ich habe deinen Text so in meinen Quelltext kopiert, aber nach meiner Datei und dem Fensternamen sind die Zusatzoptionen für mein Popup irgendwie nicht korrekt. alles was nach ..."+links+" kommt wird nicht mehr als JS erkannt, sondern nur noch als Kommentar.

      Habe ich irgend etwas vergessen, oder muss ich noch einen zusätzlichen Funktionsaufruf irgendwo einfügen???

      Dank dir.

      1. Hallo Kendo,

        Es leuchtet auch ein, und macht sinn.

        Das ist sehr schön - da ich es ja ausführlichst erklärt habe :-)

        Leider hab ich mit der Implementierung noch Probleme.

        deswegen gibt es ja auch dieses tolle forum.

        Ich definiere Breite und Höhe meines Fensters

        var breite = 250; // Breite deines Fensters
         var hoehe = 100; // Hoehe des fensters

        genau, in pixel.

        Ich berechne die Platzhalter links und oben

        links = eval((screen.width - breite) / 2); oben = eval((screen.height - hoehe) / 2);

        jep

        Jetzt müsste doch ein Funktionsaufruf kommen, oder?

        genau, der Aufruf der window-methode open() kommt nun. Wie du vielleicht auch siehst, wird der rückgabewert von window.open(), und zwar ein sogenannter "handler" der variable "fenster" zugewiesen. Somit kannst du z.B. über die variable "fenster" alles machen, was du in dem fenster, in dem dein script steht, machen kannst. Wir beschränken uns mal darauf, das fenster in den vordergrund zu holen [fenster.focus();], das passiert zwar idr automatisch, aber warum mal nicht. Du kannst es auch alles weglassen und einfach window.open(.... hinschreiben.

        ... ="+hoehe+",top="+oben+",left="+links+");

        ^^^^
        Oh sorry, Syntaxfehler! Da wo die ^ stehen darf nicht am ende das +" stehen! Also: ...",top"+oben+",left="+links);
        ich habe das beispiel aus einer meiner homepages kopiert [bin halt so faul ;-)] und einen fehler hier beim "anschneiden" gebaut. sorry!

        Ich habe deinen Text so in meinen Quelltext kopiert, aber nach meiner Datei und dem Fensternamen sind die Zusatzoptionen für mein Popup irgendwie nicht korrekt. alles was nach ..."+links+" kommt wird nicht mehr als JS erkannt, sondern nur noch als Kommentar.

        Kommentar? Komisch, es ist jedenfalls ein syntaxfehler. Einfach wegmachen, dann sollte es funktionieren.

        Habe ich irgend etwas vergessen, oder muss ich noch einen zusätzlichen Funktionsaufruf irgendwo einfügen???

        nö, dein fenster mit der breite 250 und höhe 100 erscheint jetzt in der mitte des bildschirms. Du musst natürlich noch die URL des Fensters einstellen und kannst wenn du willst noch sonstirgendwie dran rumarbeiten.

        WauWau

        --
        +-- WauWau Selfcode
        |   ss:) zu:) ls:< fo:~ de:] va:) ch:° n4:# rl:( br:< js:| ie:% fl:| mo:|
        +-- WauWau Nostalgie
        |   Die Bedeutung des Bellens ("WauWau") liegt ursprünglich darin, dass ein
        |   Gruppenfremder gewarnt oder ihm Alarm signalisiert wird.
        +-- WauWau Heute
        |   Heutzutage ist die Bedeutung von "WauWau": Achtung, hier kommt "WauWau"!
        |   Die Bedeutung liegt hierbei auf den "Wau", und zwar auf beiden.
        +-- WauWau E-Mail
        |   Coming soon...