# Link in Popup-Fenster öffnen?



## Nusskati (2. Februar 2017)

Hallo, ich weiß leider nicht, ob es wirklich die passende Kategorie ist aber ich nehme an, dass es mit Javascript funktioniert.
Auf einer Internetseite (http://bit.ly/2kgfcuQ) gibt es (rechts) den Button "Anfragen", wenn man diesen anklickt öffnet sich ein Popup?-Fenster, ohne Browserfenster drum herum.

Sowas möchte ich auf meiner Seite auch gerne einbauen und suche jetzt den Code dafür.
Kann mir da jemand von Euch helfen?


----------



## SpiceLab (2. Februar 2017)

Nusskati hat gesagt.:


> Auf einer Internetseite (http://bit.ly/2kgfcuQ) gibt es (rechts) den Button "Anfragen", wenn man diesen anklickt öffnet sich ein Popup?-Fenster, ohne Browserfenster drum herum.
> 
> Sowas möchte ich auf meiner Seite auch gerne einbauen und *suche* jetzt den Code dafür.


Dazu hätte ich an Deiner Stelle als erstes den Quellcode studiert (bevor ich ein Forum darum bitte), und um die Analyse zu beschleunigen, das Element, das die Aktion beim Klicken auslöst, mit Hilfe des im Browser integrierten DeveloperTools untersucht (Rechtsklick auf/über dem Element -> je nach Browser im Kontextmenü "Untersuchen" oder "Element untersuchen" wählen), was Dir diese Info frei Haus geliefert hätte:

```
<!-- Erster Button oben rechts "JETZT HIER ANFRAGEN" -->
<a id="badge" target="_self" class="hidden-xs button-color btn-font-color fancybox-frame" href="#contact-form">...</a>
```
Der zuletzt enthaltene Klassenname *fancybox-frame* ist wegweisend -> http://fancyapps.com/fancybox/

Daneben verweist im HTML-Code die Zeile #870 auf die zugehörige JavaScript-Datei:

```
<script src="/assets/landingpage_clean-97a992ffcb455710f2203d357c8ce481f9e85864a7c6d6ef3e8636b922d2f5b1.js"></script>
```
Auszug daraus:

```
/*!
 * fancyBox - jQuery Plugin
 * version: 2.1.5 (Fri, 14 Jun 2013)
 * @requires jQuery v1.6 or later
 *
 * Examples at http://fancyapps.com/fancybox/
 * License: www.fancyapps.com/fancybox/#license
 *
 * Copyright 2012 Janis Skarnelis - janis@fancyapps.com
 *
 */
```
Alternativ zur Fancybox kannst Du nach Oberbegriffen googeln, wie "_modal window_", "_inline-popup_", "_dialog-box_", oder auch "_lightbox clone_".

Letzteres führt Dich u.a. auch zu Varianten von http://lokeshdhakar.com/projects/lightbox2/, die, wie Fancybox, neben *<img>* (Bildergallerien) noch weitere Elemente/Inhalte unterstützen.

Und weil Fancybox dem obigen Kommentar zufolge ein Plugin (Erweiterung) für das JS-Framework jQuery (https://jquery.com/) ist, was im Einzelfall zu viel des Guten ist, für einen einzigen Anwendungsfall die umfangreiche Bibliotheksdatei (*jquery.js* / *jquery.min.js*) in der Seite einzubinden, und ich nicht weiß, ob jQuery schon im Einsatz ist, hier der SELFHTML-Artikel

https://wiki.selfhtml.org/wiki/JavaScript/Anwendung_und_Praxis/Popup-Boxen
der auf Beispiele verweist, die mit nativem JS laufen:

https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element/className#Inline-Popup
https://wiki.selfhtml.org/wiki/JavaScript/Anwendung_und_Praxis/zugängliche_Dialog-Box



Nusskati hat gesagt.:


> ich weiß leider nicht, ob es wirklich die passende Kategorie ist aber ich nehme an, dass es mit Javascript funktioniert.


So ein Modal Window lässt sich aber auch ohne jegliches JS realisieren 

https://webdesignerhut.com/pure-css-modal-window-effect/
https://css-tricks.com/considerations-styling-modal/

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
http://drublic.github.io/css-modal/

...
[edit]Tipp-Ex[/edit]​


----------

