Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 8
Seite [1]
ven0m


Going for pro




Herkunft: Essen
Beiträge: 406
 # Thema - 12.06.2014 um 12:43 Uhr
Hallo zusammen,

ich sitze momentan an einem Projekt bei dem ich den Adminbereich bzw. den kompletten [users:nalvogin] teil in ein overlay packen wollte.

Das Problem an der sache ist, das ich zwar den navlogin teil in das overlay bekomme, aber dann dort keine Links mehr anklicken kann um die Account / Seitenverwaltung auch dort drin zu haben.
Man könnte jetzt meinen, das es vll. klappt wenn ich [func:show] mit in das overlay packe, aber auch das bringt mich nicht weiter.

Ich habe mich an dieses kleine Tutorial gehalten: Klick

Einen Link zur Seite möchte ich nicht öffentlich Posten, da sich das Projekt wie schon erwähnt noch in Entwicklung befindet.


Ich hoffe das mir jemand weiterhelfen kann und das es überhaupt möglich ist das ganze so umzusetzen.


------------------
Gruß
ven0m
Inaktiv
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 1 - 12.06.2014 um 14:02 Uhr
Naja, was soll man jetzt antworten ohne deinen Code zu kennen?


Inaktiv
|
ven0m
Thread-Ersteller


Going for pro




Herkunft: Essen
Beiträge: 406
 # Antwort: 2 - 12.06.2014 um 14:08 Uhr
Ich kann dir gerne einen Link per PM zukommen lassen. Wie gesagt, möchte das ganze hier nicht öffentlich posten


------------------
Gruß
ven0m

Inaktiv
|
Deaktiviert

Supporter
Supporter



Beiträge: 1287
 # Antwort: 3 - 12.06.2014 um 17:51 Uhr
Hört sich mehr nach einem Auftragsangebot an, um ehrlich zu sein.


Inaktiv
|
ven0m
Thread-Ersteller


Going for pro




Herkunft: Essen
Beiträge: 406
 # Antwort: 4 - 12.06.2014 um 18:04 Uhr
Hi Schalla,

ein Auftrag sollte das nicht direkt sein^^.
Ich möchte das ganze nur nicht "öffentlich" posten, bevor es fertig ist

Kann den Code hier gerne rein packen, der ist kein Staatsgeheimnis.

CSS.... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
1. / 2. / ... 
 .overlay-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    cursor: pointer;
    z-index: 1000; /* high z-index */
    background: #000; /* fallback */
    background: rgba(0,0,0,0.75);
}
    .overlay-content {
        background: #fff;
        padding: 1%;
        width: 40%;
        position: relative;
        top: 15%;
        left: 50%;
        margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */
        cursor: default;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0,0,0,0.9);
    }
 
    .close-btn {
        cursor: pointer;
        border: 1px solid #333;
        padding: 2% 5%;
        background: #a9e7f9; /* fallback */
        background: -moz-linear-gradient(top,  #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9), color-stop(4%,#77d3ef), color-stop(100%,#05abe0));
        background: -webkit-linear-gradient(top,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
        background: -o-linear-gradient(top,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
        background: -ms-linear-gradient(top,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
        background: linear-gradient(to bottom,  #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
        border-radius: 4px;
        box-shadow: 0 0 4px rgba(0,0,0,0.3);
    }
    .close-btn:hover {
        background: #05abe0;
    }
 
/* media query for most mobile devices */
@media only screen and (min-width: 0px) and (max-width: 480px){
 
    .overlay-content {
        width: 96%;
        margin: 0 2%;
        left: 0;
    }
}


Natürlich den javascript teil ganz am ende vom body eingefügt nach dem func:javascript
javascript... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
1. / 2. / ... 
 $(document).ready(function(){
    // show popup when you click on the link
    $('.show-popup').click(function(event){
        event.preventDefault(); // disable normal link function so that it doesn't refresh the page
        var docHeight = $(document).height(); //grab the height of the page
        var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling      
        $('.overlay-bg').show().css({'height' : docHeight}); //display your popup and set height to the page height
        $('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top  
    });
 
    // hide popup when user clicks on close button
    $('.close-btn').click(function(){
        $('.overlay-bg').hide(); // hide the overlay
    });
 
    // hides the popup if user clicks anywhere outside the container
    $('.overlay-bg').click(function(){
        $('.overlay-bg').hide();
    })
    // prevents the overlay from closing if user clicks inside the popup overlay
    $('.overlay-content').click(function(){
        return false;
    });
 
});


In der index.htm ist folgender teil "verbastelt":
mehr... +-
 
1.
2.
3.
4.
5.
6.
1. / 2. / ... 
 <div class="overlay-bg">
    <div class="overlay-content">
        <p>Oh My! This is a popup!</p>
        <button class="close-btn">Close</button>
    </div>
</div>


Und natürlich eine Verlinkung damit man das ganze overlay dann öffnen kann:
 
1.
1. / 2. / ... 
 Please <a class="show-popup" href="#">click here</a> to see the popup


Das funktioniert auch soweit alles. Die Positionierung passt, es wird auch der richtige Inhalt in das overlay gepackt, nur leider funktioniert kein einziger Link.

Ich hatte gehofft, das sich jemand vielleicht schon mal mit sowas auseinander gesetzt hat und mir evtl. einen Tipp geben kann warum die Links nicht funktionieren.


------------------
Gruß
ven0m

Inaktiv
|
palle ClanSphere Team

Supporter
Supporter




Beiträge: 3073
 # Antwort: 5 - 12.06.2014 um 18:07 Uhr
@ven0m ich denke du hast schalla falsch verstanden.


------------------
I like the part where it says 'nyan'



Inaktiv
|
ven0m
Thread-Ersteller


Going for pro




Herkunft: Essen
Beiträge: 406
 # Antwort: 6 - 12.06.2014 um 18:11 Uhr
Das mag sein, falls dem so ist wäre es klasse wenn er seine aussage evtl. kurz erläutern würde


------------------
Gruß
ven0m

Inaktiv
|
Deaktiviert

Supporter
Supporter



Beiträge: 1287
 # Antwort: 7 - 12.06.2014 um 19:35 Uhr
Hey ven0m,

ist garnicht böse gemeint, aber du hast halt keine spezifische Frage sondern mehr so nach dem Motto "Kann mir das jemand machen?"

Es gibt kene Fehlerbeschreibung und keine genauen Nachfragen, daher mein Kommentar.


Inaktiv
|
ven0m
Thread-Ersteller


Going for pro




Herkunft: Essen
Beiträge: 406
 # Antwort: 8 - 12.06.2014 um 20:59 Uhr
Hi Schalla,
ich hab deine Antwort auch nicht "böse" aufgenommen

Ok, ich gebe zu meine Formulierung war wirklich nicht die beste. Da muss ich dir definitiv recht geben.
Was die Sache mit dem overlay angeht, werde ich mich mal weiter schlau machen, mit der Lösung von mir wird das wohl nicht klappen, weil die Seite neu geladen werden würde und dadurch das overlay wieder verschwindet (wenn ich das richtig verstanden habe).


------------------
Gruß
ven0m

Inaktiv
|
Antworten: 8
Seite [1]


Sie müssen sich registrieren, um zu antworten.