Einfliegendes Fenster

Rick

Hallo,
wie kann man ein einfliegendes Fenster erstellen?
Mir geht es um eine (sehr sparsam anzuwendende) Möglichkeit, eine aktuelle Info auf der ersten Seite
auffällig erscheinen zu lassen.

Grüße
Rick

Mario

Hallo Rick,
Ich bin für dich mal auf die Suche gegangen.
Was ich gefunden habe könnte dann in etwa so aussehen. LINK
Das fliegt zwar nicht ein, aber die Erscheinung lässt sich ja recht auffällig gestalten

Falls du das testen willst schreib ich hier mal eine kleine Anleitung.

Doppelklick auf Startseite, dann auf Attribute, unten Butten Attribute Hacken bei alle anzeigen setzen.
Unter Standard Doppelklick auf mobile_script und folgendes Einfügen:

Code

<style>
#container{
  width:960px;
  margin:auto;
  padding:20px;
}




p{
  margin-bottom:20px;
  line-height:24px;
}




h1, h2{
  color:orange;
  font-size:24px;
  margin-bottom:20px;
  font-weight:bold;
  margin:20px 0;
}




#hover{
  position:fixed;
  background:#000;
  width:100%;
  height:100%;
  opacity: 0
}




#popup{
  position:absolute;
  width:600px;
  height:180px;
  background:#000;
  left:50%;
  top:50%;
  border-radius:5px;
  padding:60px 0;
  margin-left:-320px; /* width/2 + padding-left */
  margin-top:-150px; /* height/2 + padding-top */
  text-align:center;
  box-shadow:0 0 10px 0 #000;





}




#close{
  position:absolute;
  background:black;
  color:white;
  right:-15px;
  top:-15px;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  font-size:8px;
  font-weight:bold;
  font-family:'Arial Black', Arial, sans-serif;
  cursor:pointer;
  box-shadow:0 0 10px 0 #000;
}
</style>
<script>
<!--
$(document).ready(function(){

  //chiusura al click sulla parte scura
  $("#hover").click(function(){
        $(this).fadeOut();
    $("#popup").fadeOut();
    });

  //chiusura al click sul pulsante
  $("#close").click(function(){
        $("#hover").fadeOut();
    $("#popup").fadeOut();
    });

});
-->
</script>

Alles anzeigen

Diesen Code kannst du natürlich an deine Bedürfnisse anpassen.

Nun fügst du auf der Startseite einen neuen Artikel (Quellcode) mit folgendem Inhalt ein:

Code

<div id="hover"></div>




  <div id="popup">
    <div id="close">X</div>

    <div id="tweet" class="animated bounce"><i class="fa fa-twitter fa-fw fa-5x"></i></div>
    <h2>INFO</h2>
<p>Vor drei Wochen habe ich erfahren, dass Du krank bist.<br>Mach' Dir keine Sorgen. Mir geht es gut.</p>
<a href="http://community.zeta-producer.com/thread/4597-einfliegendes-fenster/?postID=22571#post22571">Funktioniert auch mit Link</a>
<p><img src="http://www.gamesprays.com/files/resource_media/preview/smiley-face-7197_preview.png" alt=""></p>




<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

  </div>

Alles anzeigen

Auch diesen Code passt du natürlich für dich an.

Der Code ist nicht von mir, sondern von codepen.io

Rick

OK,
so ähnlich

Das Fenster soll nach Öffnen der eigentlichen Seite z.B. von rechts einfliegen.
Dieses Beispiel steht ja von Anfang an auf der Seite.
Oder zeigt mein Browser es falsch an?

Grüße und Danke für die ausführliche Info.

Mario

Dann mach dich auf die Suche nach geeignetem Script.
Und wir werden hier im Forum versuchen ob man dieses in Zeta integrieren kann.

Rick

Mal schauen, ob ich was finde. Ist ja immer so eine Sache, wenn man nicht genau beschreibt, was man finden will...

Rick

Hallo,
ich glaube das könnte so etwas sein; bin mir aber nicht sicher, ob ich den Code an der richtigen Stelle ausgeschnitten habe.
Stammt aus Seite :
http://www.kundengewinnung-im-internet.com/die-aufgabe-ihrer-website/

Gruß Rick

---

<div id="so_overlay"></div>

<span class="so_text_title" id="so_text_title" style="font-family: Tahoma; font-size: 20px; color: #297DA8; width: 565px"><b>Das nächste <u>Gratis-Webinar</u> nicht verpassen!</b><br/><br/></span>

<span class="so_text_text" id="so_text_text" style="font-family: Tahoma; font-size: 16px; color: #454646; width: 565px"><b>"Wie Sie im Internet neue Kunden gewinnen - die Strategie"

<br/>am Dienstag, 09. Dezember um 10.00 Uhr</b><br/><br/>Alle Infos erhalten Sie per E-Mail - Jetzt Platz reservieren:</span>

</div>

<div class="so_text_spam" ><img alt="" src="http://www.kundengewinnung-im-internet.com/wp-content/plu…s/lock-icon.png" /><label style="font-family: Arial; font-size: 11px; color: #454646;">Ihre Daten sind sicher & werden niemals geteilt.</label></div>

Mario

Ich habe mir die Seite mal angesehen.
Ich glaube dieses Fenster wird nur einmal aufgerufen. Erst wenn du eine neue IP-Adresse hast erscheint das Fenster wieder.

Rick

Korrekt, aber wenn ich es richtig sehe, reicht es, den Cache zu löschen: cookie?
aber ist der Code so verwendbar; außer eigene Anpassung.

Grüße

Mario

Ob das in Zeta einzubauen ist kann ich auf die schnelle nicht sagen.
Ist schon eine komplizierte Sache.
Auf der Seite sind viele css- und js-Dateien verlinkt. Zuerst müsstest du raus finden welche davon für das Fensterle verantwortlich sind.

Einfliegendes Fenster

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?