[GELÖST] PopUp einfügen

Jogilen · 05. September 2013 10:39

Hallo,
ich brauch ein PopUp, das beim Laden aufpopt und stehen bleibt nur für eine Seite, für Information.
Gibt es was fertiges?
Danke im Voraus!

LG Jogilen

Janl · 05. September 2013 16:45

http://www.cmsmadesimple.de/forum/viewtopic.php?id=105

es ist doch gut dokumentiert hier?

Wo steckt das Problem?

mfg
Jan

Jogilen · 05. September 2013 16:53

Muss ich die einzelnen codes eingeben wenn ja. Leider bin ich hier ein totaler anfänger. ops

Janl · 05. September 2013 17:07

Leider bin ich hier ein totaler anfänger. Dann wird es ein wenig schwer . .
Es werd ein Global contentblock gemacht mit DIV's die up-poppen wenn mann mit dem Maus über Text/Bilder geht, die so markiert sind.

Dazu müssen Templates en Stylesheets angepasst und UDT's gemacht werden.

Bei nur 1 Popup beim Laden könnte man es mit ein wenig Javascript machen aber, soll es stehen bleiben, oder soll es wieer verschwinden oder muss man es wegklicken, wie genauer deine Frage ist wie besser wir antworten können.

mfg
Jan

Jogilen · 05. September 2013 20:05

Es soll ein Popup sein das wenn mann die startseite öffnet aufpoppt und entweder schließen kann bzw. auf den Button zur bestellung klicken kann.

Danke für die hilfe...

NaN · 06. September 2013 07:39

Um mal diese Frage zu beantworten:

Gibt es was fertiges?

Leider nein.

Was für eine Bestellung?
Woher kommt das Formular?

Derartige Popups kann man ohne viel zu Programmieren sehr einfach mit jQuery & Co. umsetzen. Der Knackpunkt ist eher, woher die anzuzeigenden Daten kommen und wohin das Formular dann gehen soll.

Jogilen · 06. September 2013 07:49

Es soll eine bestellung für eine Dienstleistung sein. Das Formular habe ich in Formbuilder schon erstellt . Das Formular soll dann an den KD und an mich gehen.

Janl · 06. September 2013 08:51

Gibt es irgendwo ein Beispiel?

mfg
Jan

Jogilen · 06. September 2013 08:57

Leider habe ich aktuell dazu kein Beispiel für das Popup.

Jogilen · 06. September 2013 09:00

Das einzige was ich gemacht habe ist auf folgender Seite zufinden:
http://ivcc.com.de/Leistungen/saisonall … raktionen/
wenn man hier auf bestellen geht kommt man zum adobeformscentral, soetwas kann ich mir auf für das Popup vorstellen, ein fenster das aufgeht mit einem Button Bestellung oder soähnlich was dann zum adobeformscentral führt.

Janl · 06. September 2013 09:09

Wenn es einfach sein soll, mache ein Template wo fast nichts drinnen ist, nur dein Form aus Formbuilder und hänge eine Seite mit diesem Template hinter ein Button auf der erste Seite.

Dann hast Du dasselbe wie im Beispiel.

mfg
Jan

Jogilen · 06. September 2013 09:12

Aber ein richtiges Popup wäre das ja dann nicht, genial wäre es wenn ich es so wie in dem Link hinbekommen würden
http://www.pixelfreu.de/blog/details/it … assen.html
Leider verstehe ich die Anweisung überhaupt nicht sonst hätte ich diese schon mal versucht.

LG
Jogilen

Klenkes · 06. September 2013 10:06

Du meinst kein Popup sondern ein Modal Window oder Modal Dialog.
Ein Popup wäre ein weiteres Browserfenster, bei welchem per Javascript z.B. Breite und Höhe angegeben werden.
Ein Modal ist ein positioniertes DIV in einer anderen Ebene über dem Dokument.

Anleitungen für Modal Windows gibt es im Web im 1000er Pack zu finden.

Die Anleitung, die ich dir per Mail geschickt habe, ist übrigens genau so etwas.

Jogilen · 06. September 2013 10:09

@Klenkes, Danke ich werde dies einmal ausprobieren. Falls ich Hilfe brauche kann ich mich dann an Dich wenden?

LG
Jogilen

NaN · 06. September 2013 10:30

Wäre das hier in Deinem Sinn: http://buckwilson.me/lightboxme/ ?
Lade das Script "jquery.lightbox_me.js" auf Deinen Server (z.B. nach uploads/js/).

Zunächst solltest Du das FormBuilder-Formular ganz normal in die Start-Seite einbauen. So als gehöre es zum Inhalt. (Du kannst es auch ins Seiten-Template einbauen und nur dann anzeigen lassen, wenn die anzuzeigende Seite die Startseite ist, aber ich denke das wäre für den Anfang zu kompliziert.)

Danach musst Du eigentlich nur noch eine kleine Änderung am Formular-Template und Seiten-Template vornehmen.

Das Formluar-Template änderst Du so ab, dass das gesamte Formular in einem DIV mit einer ID steckt (wenn das nicht sogar schon so ist):

Hier klicken, um den Code zum Kopieren zu markieren

<div id="bestellformular">

... FormBuilder-Formular-Template-Zeugs

</div>

Im Seiten-Template suchst Du unten mal nach "jQuery":

Hier klicken, um den Code zum Kopieren zu markieren

<script src="http://ivcc.com.de/modules/jQuery/libraries/jquery-1.4.2/jquery.js" type="text/javascript" language="JavaScript"></script>

Und darunter fügst Du den Link zum lightbox_me-Script ein und ein kleines inline-Script:

Hier klicken, um den Code zum Kopieren zu markieren

<script src="http://ivcc.com.de/uploads/js/jquery.lightbox_me.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#bestellformular").hide();
    $(window).onload(function(){
        $("#bestellformular").lightbox_me();
    });
});
</script>

Das sollte es eigentlich schon gewesen sein.

Jogilen · 06. September 2013 10:56

OK die Jquery Ligthboxme habe ich in Upload hochgeladen und nu verlassen mich wieder die geister, ich glaube ich gebe gleich auf.

NaN · 06. September 2013 12:04

Wo hängt's denn?

Du schriebst

Das Formular habe ich in FormBuilder schon erstellt. Das Formular soll dann an den KD und an mich gehen.

Daher ging ich davon aus, dass Du weißt, wie Du das Formular auf Deine Seite bekommst, und dass das Formular auch funktioniert.
(Also anzeigen/ausfüllen -> absenden -> E-Mail)
Ist dem so, oder fehlt da noch was?

Wenn Du hier schon Probleme hast, dann macht es nicht viel Sinn, die Sache mit der ModalBox oder Lightbox etc. zu erklären. Denn das ist leicht erledigt. Dazu muss aber alles andere bereits fertig sein und funktionieren. Dann müsstest Du nämlich nur noch genau die Anleitung befolgen.

Wenn Du nicht weißt, was mit dem ein oder anderen Begriff gemeint ist oder wo Du diese oder jene Option bzw. bestimmte Menüpunkte findest, frag einfach nach. Wir stecken hier oftmals schon so tief in der Materie drin, dass wir gewisse Kenntnisse manchmal einfach vorraussetzen, die ein Anfänger aber mitunter garnicht haben kann.

Du hast CMSms installiert, Inhalte erstellt, Module installiert, ein Formular mit FormBuilder erstellt (da habe selbst ich mich noch nicht rangetraut) und sogar einen Chat integriert (auch davon habe ich bisher immer die Finger gelassen). Scheiterst aber daran, ein bissel HTML und Javascript in ein Template einzufügen. Da fällt es mir jetzt schwer Deine Fähigkeiten einzuschätzen bzw. Dir die richtige Hilfestellung zu geben.

Immer dran denken: Je genauer die Schilderung Deines Problems, desto präziser können wir auch Antworten geben.

Jogilen · 06. September 2013 12:10

Es scheitert daran das ich nicht weiss wo ich genau die einzelnen codes einbauen muss also an welche stelle diese gehören.
Das Formular Funktioniert super, damit hatte ich keine Probs. Meine Schwierigkeit liegt immer daran das ich teilweiße nicht weiß wohin mit den Codes

NaN · 06. September 2013 12:34

Es gibt Formular-Templates. Die verwaltet der FormBuilder. Und es gibt Seiten-Templates. Die verwaltet das CMS.

Für das Formular gibt es im FormBuilder ein Template, oder? Dieses öffnest Du einfach. Ich kenne jetzt den genauen Menüpunkt dazu leider selber nicht mehr, aber das müsste irgendwo unter "Erweiterungen->FormBuilder" zu finden sein. Ich glaube sogar im Formular selbst. D.h. zum FormBuilder gehen, Formular auswählen und Formular-Template suchen. Du musst nicht verstehen was in diesem Template alles drin steht, das ist völlig egal. In die Erste Zeile dieses Formular-Templates schreibst Du nur

Hier klicken, um den Code zum Kopieren zu markieren

<div id="bestellformular">

und in die letzte Zeile

Hier klicken, um den Code zum Kopieren zu markieren

</div>

Anschließend klickst Du im Backend unter "Inhalte->Seiten" in der Tabelle in der Spalte "Template" auf das Template, welches bei der Startseite verwendet wird. Jetzt öffnet sich das Seiten-Template. (Findest Du übrigens auch unter "Layout->Templates", aber dazu musst Du wissen, welches Template Du bearbeiten musst. Und das findet man am schnellsten über Die Inhaltsübersicht heraus.)

Auch im Seiten-Template musst Du nicht wissen, was das alles bedeutet was da drin steht. Du musst lediglich nach unten scrollen. Da steht irgendwo

Hier klicken, um den Code zum Kopieren zu markieren

<script src="http://ivcc.com.de/modules/jQuery/libraries/jquery-1.4.2/jquery.js" type="text/javascript" language="JavaScript"></script>

Am besten die Suchfunktion des Browsers benutzen und nach "jquery" suchen.
Und genau da drunter fügst Du das Script mit src-Attribut zu Deinem "jquery.lightbox_me.js" ein. Das könnte in etwa so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

<script src="http://ivcc.com.de/uploads/js/jquery.lightbox_me.js" type="text/javascript" language="JavaScript"></script>

(Sofern Du die Datei nach "/uploads/js/" hochgeladen hast)
Und genau da drunter fügst Du dieses possierliche Script ein:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
$(document).ready(function(){
    $("#bestellformular").hide().lightbox_me();
});
</script>

Wenn Du jetzt "{FormBuilder ...}" in den Inhalt der Startseite einfügst (mit den korrekten Parametern, die Du brauchst um das Bestellformular anzuzeigen), dann passiert folgendes:

Das Formular steht brav im Inhalt, aber unmittelbar nachdem der Browser das Dokument geladen hat und noch bevor er anfängt, Deine Seite anzuzeigen, wird das Formular mit der Funktion .hide() ausgeblendet. Anschließend wird auf das ausgeblendete Formular der Lightbox-Effect angewendet.

Beitrag geändert von NaN (08. September 2013 12:54)

Jogilen · 06. September 2013 12:47

OK soweit habe ich es jetzt verstanden nur finde ich den eintrag im Template nicht:

Hier klicken, um den Code zum Kopieren zu markieren

{strip}
{process_pagedata}

{* With cms_lang_info we retrieve current language information, assign gives us $nls variable we can work with *}
{cms_lang_info assign='nls'}

{* using strip as we don't want useless whitespace, especially not before doctype *}
{/strip}<!doctype html>
<html lang='{if isset($nls)}{$nls->htmlarea()}{/if}' dir='{if isset($nls)}{$nls->direction()}{/if}'>
<head>
<meta charset='{if isset($nls)}{$nls->encoding()}{/if}'>
<title>{title} - {sitename}</title>
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<meta name='HandheldFriendly' content='true' />
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{metadata}
{* See in news detail template how cannonical url can be assigned from module *}
{if isset($canonical)}<link rel='canonical' href='{$canonical}' />{elseif isset($content_obj)}<link rel='canonical' href='{$content_obj->GetURL()}' />{/if}
{* This is how all the stylesheets attached to this template are linked to *}
{cms_stylesheet}
{* using google fonts *}
<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
{* learning IE lower then Version 9 some html5 *}
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}
{cms_selflink dir='start' rellink='1'}
{cms_selflink dir='prev' rellink='1'}
{cms_selflink dir='next' rellink='1'}
</head>
<body id='boxed'>
<!-- #wrapper (wrapping content in a box) -->
<div class='container centered' id='wrapper'>
    <!-- accessibility links, jump to nav or content -->
    <ul class="visuallyhidden">
        <li>{anchor anchor='nav' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    <!-- accessibility //-->
    <!-- .top (top section of page containing logo, navigation search...) -->
    <header class='top'>
        <div class='row header'>
            <!-- .logo (cmsms logo on the left side) -->
            <div class='logo grid_4'>
                <a href='{root_url}' title='{sitename}'>
                    <img src='{uploads_url}/simplex/images/ivcclogotest.gif' width='227' height='59' alt='{sitename}' />
                    <span class=''></span>
                </a>
            </div>
            <!-- .logo //-->
            <!-- .main-navigation (main navigation on the right side) -->
            <nav class='main-navigation grid_8 noprint' id='nav' role='navigation'>
                {menu template='Simplex_Navigation.tpl'}
            </nav>
            <!-- .main-navigation //-->
        </div>
        <!-- .header-bottom (bottom part of header containing catchphrase and search field) -->
        <div class='row header-bottom'>
            <section class='phrase'>
                <span class='grid_7'>Ihr zuverlässiges Virtuelles Call Center aus Schwäbisch Hall.</span>
                {strip}
                {search assign='is_search'}{* assigned search module tag, now we can build different search template for this site template and have fun with html5, Read [url]http://www.w3.org/TR/html-markup/input.search.html[/url] for full attirbute specs *}
                {if isset($is_search)}
                <div class='grid_5 search noprint' role='search'>
                        {$startform}
                        <label for='{$search_actionid}searchinput' class='visuallyhidden'>{$searchprompt}:</label>
                            <input type='search' class='search-input' id='{$search_actionid}searchinput' name='{$search_actionid}searchinput' size='20' maxlength='50' value='' placeholder='{$searchtext}' />
                            {if isset($hidden)}{$hidden}{/if}
                        {$endform}
                </div>
                {/if}{/strip}
            </section>
        </div>
        <div class='clear'></div>
        <!-- .header-bottom //-->
        <!-- .banner (banner area for a slider or teaser image) -->
        <section class='banner row noprint' role='banner'>
            <div class='banner-text'>
                <ul>
                    <li>Flexibel</li>
                    <li>Zuverlässig</li>
                    <li>Preiswert</li>
                    <li>Kundenorientiert</li>
                </ul>
            </div>
            <div class='banner-image cf'>
            {strip}
                {* you do not need a module for every simple site functionality. For example you can build a simple slideshow
                with php glob function ([url]http://www.php.net/manual/en/function.glob.php[/url]) without wasting your system resources 
                by using modules or plugins.
                Below would search for files matching .jpg in folder named teaser in simplex theme folder *}
                {assign var='teaser' value='uploads/simplex/teaser/*.jpg'|glob}
                    {foreach from=$teaser item='one'}
                        <div><img src='{root_url}/{$one}' width='852' height='275' alt='' /></div>
                    {/foreach}
            {/strip}
            </div>
        </section>
        <!-- .banner //-->
    </header>
    <!-- .top //-->
    <!-- .content-wrapper (wrapping div for content area) -->
    <div class='content-wrapper cf'>
        <!-- .content (display content first) -->
        <div class='content-inner grid_8 push_4'>
            <!-- .content-top (breadcrumbs and print button) -->
            <div class='content-top cf' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>            
                {* menu manager has action breadcrumbs since 1.11, you can use {cms_breadcrumbs} tag or {menu action='breadcrumbs'} as below *}
                {menu action='breadcrumbs'}                
                {* print tag from CMSPrinting Module *}
                {print showbutton='false' class='printbutton noprint'}                
            </div>
            <!-- .content-top //-->
            <!-- .content (actual content with title and content tags) -->
            <article class='content' id='main' role='main'>
                <h1>{title}</h1> {* title tag *}
                    {content} {* content entered in page editor area *}
            </article>
            <!-- .content //-->
        </div>
        <!-- .content-inner //-->
        <!-- .sidebar (then show sidebar) -->
        <aside class='sidebar grid_4 pull_8'>
            {* sample of using News Module tag for summary of latest two articles *}
            {news summarytemplate='Summary_Simplex' number='2' detailpage='news' detailtemplate='Simplex_Detail'}
        </aside>
        <!-- .sidebar //-->
        <div class='cf grid_8 prefix_4'>
            <span class='previous'>{cms_selflink dir='previous'}</span>
            <span class='next'>{cms_selflink dir='next'}</span>
        </div>
    </div>
    <!-- .content-wrapper //-->
    <!-- .footer (footer area) -->
    <footer class='row footer'>
        <span class='back-top'>{anchor anchor='main' text='&uarr;'}</span>
        <section class='grid_4 copyright'>
            <ul class='social cf'>
                <li class='twitter'><a title='Twitter' href=''>Twitter</a></li>
                <li class='facebook'><a title='Facebook' href='https://www.facebook.com/sommerwerk-cloud'>Facebook</a></li>
                <li class='linkedin'><a title='LinkedIn' href=''>LinkedIn</a></li>
                <li class='youtube'><a title='YouTube' href=>YouTube</a></li>
            </ul>
            {global_content name='footer'}
        </section>
        <section class='grid_8 noprint'>
            <nav class='footer-navigation row'>
                {menu template='Simplex_Navigation.tpl' excludeprefix='home' number_of_levels='2' loadprops='0'}
            </nav>
        </section> 
    </footer>
    <div class='clear'></div>
</div>
<!-- #wrapper //--> 
{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}
</body>
</html>

wo ich ersetzten soll!

NaN · 06. September 2013 12:53

Ah. Okay. jQuery wird bei Dir von dem Plugin {cms_jquery} eingefügt:

Hier klicken, um den Code zum Kopieren zu markieren

{cms_jquery exclude='jquery-ui.min.js,jquery.ui.nestedSortable.js,jquery.json.min.js' append='uploads/simplex/js/functions.min.js'}

Dann eben da drunter direkt vor dem schließenden </body>.

Jogilen · 06. September 2013 13:02

OK Super soweit habe ich alles gemacht aber auf der Test seite passiert nix ausser ein kurzes aufploppen:

http://ivcc.com.de/ncleanblue/

NaN · 06. September 2013 13:26

Da geraten gerade mehrere Sachen durcheinander.
Ich weiß nicht, was Du jetzt noch so alles eingefügt hast, aber 1. steht jQuery zweimal drin. Einmal in Version 1.7.2 und einmal in Version 1.4.2.
Das erste kommt vom Plugin {cms_jquery} und das zweite vom Modul jQuery.
Wozu brauchst Du das Modul? Was macht das Ding eigentlich? Ich habe Sinn und Zweck dieses Moduls nie verstanden.
Ich habe da einen Tippfehler im Script. Es heißt nicht $(window).onload(..) sondern nur $(window).load(...). Außerdem muss man nicht unbedingt auf load() warten. Man kann schon bei ready() anfangen:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript">
$(document).ready(function(){
    $("#bestellformular").hide().lightbox_me();
});
</script>

Zweitens kann das lightbox_me Script nicht gefunden werden. Wohin hast Du es hochgeladen?

Jogilen · 06. September 2013 13:33

Ich habe gelesen das man mit dem Modul Popups erstellen könnte, habe ich noch so in Erinnerung, meinst es bringt was wenn ich es lösche?

Jogilen · 06. September 2013 13:36

So ich habe nun im script den anderen code eingegeben aber nach einer art Popup sieht es nicht aus....

Forum für CMS/made simple

#1 05. September 2013 10:39

[GELÖST] PopUp einfügen

#2 05. September 2013 16:45

Re: [GELÖST] PopUp einfügen

#3 05. September 2013 16:53

Re: [GELÖST] PopUp einfügen

#4 05. September 2013 17:07

Re: [GELÖST] PopUp einfügen

#5 05. September 2013 20:05

Re: [GELÖST] PopUp einfügen

#6 06. September 2013 07:39

Re: [GELÖST] PopUp einfügen

#7 06. September 2013 07:49

Re: [GELÖST] PopUp einfügen

#8 06. September 2013 08:51

Re: [GELÖST] PopUp einfügen

#9 06. September 2013 08:57

Re: [GELÖST] PopUp einfügen

#10 06. September 2013 09:00

Re: [GELÖST] PopUp einfügen

#11 06. September 2013 09:09

Re: [GELÖST] PopUp einfügen

#12 06. September 2013 09:12

Re: [GELÖST] PopUp einfügen

#13 06. September 2013 10:06

Re: [GELÖST] PopUp einfügen

#14 06. September 2013 10:09

Re: [GELÖST] PopUp einfügen

#15 06. September 2013 10:30

Re: [GELÖST] PopUp einfügen

#16 06. September 2013 10:56

Re: [GELÖST] PopUp einfügen

#17 06. September 2013 12:04

Re: [GELÖST] PopUp einfügen

#18 06. September 2013 12:10

Re: [GELÖST] PopUp einfügen

#19 06. September 2013 12:34

Re: [GELÖST] PopUp einfügen

#20 06. September 2013 12:47

Re: [GELÖST] PopUp einfügen

#21 06. September 2013 12:53

Re: [GELÖST] PopUp einfügen

#22 06. September 2013 13:02

Re: [GELÖST] PopUp einfügen

#23 06. September 2013 13:26

Re: [GELÖST] PopUp einfügen

#24 06. September 2013 13:33

Re: [GELÖST] PopUp einfügen

#25 06. September 2013 13:36

Re: [GELÖST] PopUp einfügen

Fußzeile des Forums