03.04.2014, 10:56
|
|||
|
|||
Schliessendes Popup beim Nebendran clicken
Hallo Zusammen,
ich hab da gerade etwas gebastelt, dass auch schon soweit funktioniert, nur ich hätte gern auch, dass sich das Popup auch schliesst, wenn man nebendran (also neben das geöffnete Popup clickt, und nicht nur auf den "Rollover-Schliessen-Button". Ich füge meinen Code mit ein (weiter unten), kann man da noch was in dieser Richtung optimieren? Geändert von prinzvalium (03.04.2014 um 11:54 Uhr) 
|
| Sponsored Links |
|
03.04.2014, 11:26
|
|||
|
|||
|
Verwende bitte die CODE Werkzeuge um Code hier einzufügen.
Auch ist Code:
document.getElementById('light').style.display='b lock';
document.getElementById('fade').style.displa y='block'
Leute, die sich die Mühe machen, deinen Code nachzubauen, haben deine Bilder nicht. Deshalb bitte immer einen Text in deinen Links angeben! (Wenn du unbedingt eine superduperhübsche Grafik haben willst, dann arbeite mit image replacements) Nun zu deinem eigentlichen Problem: Was du suchst ist eine Lightbox, warum nimmst du nicht eine der 1000en bereits fertig existierenden?
|
| Sponsored Links |
|
03.04.2014, 11:52
|
|||
|
|||
|
Hallo Cloned, danke für deine antwort,
klar, geht ja nicht ohne bilder, kuckst du hier: Unbenanntes Dokument Wie geht das mit dem Code-Werkzeug? Hoffe mache das jetzt richtig.... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
a.test
{display:block;
position:absolute;
left:100px;
bottom:100px;
width:10px;
height:10px;
background:url(n.png) no-repeat;
}
a.test:hover {background-position:-10px;}
a.t
{display:block;
position:absolute;
top:100px;
top:100px;
width:100px;
height:100px;
background:url(g.png) no-repeat;
}
a.t:hover {background-position:-100px;}
</style>
</head>
<body>
<a class="t" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"></a></p>
<div id="light" class="white_content">
<div style="font-family:'Courier New', Courier, monospace;position:absolute;right:10px;top:160px;">Blindtext</br>
Blindtext</br>
Inhaber: Blindtext</br>
Tel.: Blindtext</br>
Fax: Blindtext</br>
Mobil: Blindtext</br>
E-Mail :Blindtext</br>
Steuernummer: Blindtext</br>
USt-IdNr.: Blindtext</br></div>
<a class="test"href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
Nice 
Geändert von prinzvalium (03.04.2014 um 12:09 Uhr)
|
|
03.04.2014, 12:06
|
|||
|
|||
|
Suche dir eines mit der Suchmaschine wo auch die Dokumentation dabei ist.
Ein Jsfiddle-Beispiel ist undokumentiert und du musst Wissen über Javascript und jQuery haben.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
|
03.04.2014, 12:13
|
|||
|
|||
|
Danke für deinen Tipp, aber wenn ich mich mit Javascript auskennen würde, müsste ich nicht fragen, und was du mit Dokumentation meinst, weiss ich leider nicht, aber ist es denn so schwer für einen Profi, den obrigen Code so zu ergänzen, dass sich das Popup schliesst, wenn man daneben clickt? Vielleicht geht es ja nicht, dann würde ich das natürlich verstehen...
|
|
03.04.2014, 12:18
|
|||
|
|||
|
Du willst nicht lernen und wir wollen nicht deine Arbeit machen, so einfach ist das.
Wenn du jemanden beauftragen möchtest kannst du das gerne als Anzeige ins Jobforum stellen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum.
|
|
03.04.2014, 12:31
|
|||
|
|||
|
Für dein Problem musst du einen eventlistener auf deine Maske legen, welche bei Klick dein Overlay dann schließt. Möchtest du aber dann eventuell einmal zwei Overlays einbinden so musst du berücksichtigen, dass das richtige geschlossen wird.
Ich kann dir, wie vorhin auch, nur den Einsatz einer fertigen Lightbox empfehlen.
|
|
03.04.2014, 12:33
|
|||
|
|||
|
@explanator; Doch ich habs probiert, und leider ist Javascript eine Sache die leider nichts für mich ist, deshalb suche ich im netz nach fertigen codes (vorzugsweise css) und bastel auf meine art daran herum soweit ich es hinkriege und hilfe bekomme. Wenn es dir natürlich "zu viel arbeit" ist, an dem code etwas zu verändern, dann ist das doch in ordnung, und dann bedanke ich mich dennoch für deine gutgemeinten Ratschläge. Alles Kann, nix Muss.
|
|
03.04.2014, 12:34
|
|||
|
|||
|
Danke Cloned, ich schaus mir mal an
|
| Sponsored Links |
|
03.04.2014, 14:50
|
|||
|
|||
|
Also, ich bin jetzt leider auch nicht wirklich weiter. Klar, das ist eine Super-Lightbox und überhaupt das nonplusultra so was zu verwirklichen:
http://fancybox.net/ und hier wird beschrieben wie es funktioniert: http://fancyapps.com/fancybox/ und hier ein tutorial für jquery-anfänger: http://learn.jquery.com/about-jquery/how-jquery-works/ (Ich hasse die sogenannten j-query-Anfänger-tutorien, die ja mal gar nichts mit Anfänger-tutorien gemeinsam haben und die ich auch schon zigmal versucht habe, und leider dann, alleine, nach stunden aber immer wieder frustriert aufgebe.) Ich habe, so glaube ich, bis zu dem punkt wo hier: http://fancyapps.com/fancybox/ steht: "Attach fancyBox when the document is loaded. If you are not familiar with jQuery, please, read this tutorial for beginners." alles richtig gemacht. Der code den man "attachen" soll steht nach diesem satz und ist folgender: <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> Nur es steht nirgenswo, wo der hinkommt, (ich hab den im unteren code reingepackt, aber wahrscheinlich falsch oder es fehlt noch was) und ob noch etwas hinzukommt, so ein onload-script, oder so.... da fehlt doch nur noch furz, damits läuft, oder? siehe code: Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<!-- Add jQuery library -->
<script type="text/javascript" src="jquery.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancyapps-fancyBox-18d1712/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
</script>
<a class="fancybox" rel="group" href="fancyapps-fancyBox-18d1712/demo/1_b.jpg"><img src="fancyapps-fancyBox-18d1712/demo/1_s.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="fancyapps-fancyBox-18d1712/demo/2_b.jpg"><img src="fancyapps-fancyBox-18d1712/demo/2_s.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
Geändert von prinzvalium (03.04.2014 um 14:57 Uhr)
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| POPUP oder nicht POPUP....... | Rico | Javascript & Ajax | 11 | 15.06.2011 17:35 |
| Popup "überraschung" | Brian | Javascript & Ajax | 0 | 17.05.2011 23:17 |
| Popup | Rico | Javascript & Ajax | 18 | 28.09.2010 18:01 |
| Prüfen, ob Popup noch existiert | xm22 | Javascript & Ajax | 1 | 28.06.2010 17:41 |
| PopUp und Auto-Resize-Grösse | letslounge | Javascript & Ajax | 8 | 04.07.2007 12:00 |
Linear-Darstellung
