# Lightbox Modal vergrößern

**URL:** <https://forum.shopware.com/t/lightbox-modal-vergrossern/3124>\
**Category:** Shopware 3.5\
**Tags:** templates--design\
**Created:** [15. Juni 2011 um 09:28 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124 "2011-06-15T09:28:16Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [15. Juni 2011 um 09:28 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/1 "2011-06-15T09:28:16Z")

</div>

Morgen, kann mir jmd sagen, wie ich am einfachsten die Lightbox, welche ich über die class=„modal\_open“ bekomme verbreitern kann? Danke

---

<div class="post-metadata">

**Author:** ![Bibeno](https://avatars.discourse-cdn.com/v4/letter/b/13edae/32.png) [@Bibeno](https://forum.shopware.com/u/Bibeno)\
**Post date:** [15. Juni 2011 um 09:44 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/2 "2011-06-15T09:44:00Z")

</div>

Du meinst das Fenster welches aufgeht, wenn du auf ein Bild klickst?

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [15. Juni 2011 um 09:50 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/3 "2011-06-15T09:50:13Z")

</div>

Nein, mit dem Bild hat es nichts zu tun. z.B. wenn du beim Bestellvorgang auf AGB klickst (letzte Seite) Dann geht die Shopseite AGB als Lightbox auf. Dies verwende ich an mehreren Stellen (class=„modal\_open“). Das Fenster wird immer in 500px Breite geöffnet und ich hätte gerne bei einem Link eine größere Breite.

---

<div class="post-metadata">

**Author:** ![Bibeno](https://avatars.discourse-cdn.com/v4/letter/b/13edae/32.png) [@Bibeno](https://forum.shopware.com/u/Bibeno)\
**Post date:** [15. Juni 2011 um 10:03 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/4 "2011-06-15T10:03:45Z")

</div>

Also das kannst du vielleicht so machen: .modal { width: deine breite in px !important; left: 39%; (oder nach deinen wuenschen einstellen) } .modal p { width: deine breite in px !important; } .ajax\_modal\_custom { width: deine breite in px !important; }

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [15. Juni 2011 um 10:12 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/5 "2011-06-15T10:12:01Z")

</div>

Hey, danke, an sich würde es ja gehen, aber es wird dann bei allen Fenstern/Links angewendet, welche modal\_open nutzen ich will es aber nur bei einem Link so haben. In der Datei shopware.js wird eine Breite von 500px angegeben. Am besten wäre es, wenn man wie bei den Slider/Banner, einfach eine eigene Config angeben kann.

---

<div class="post-metadata">

**Author:** ![Bibeno](https://avatars.discourse-cdn.com/v4/letter/b/13edae/32.png) [@Bibeno](https://forum.shopware.com/u/Bibeno)\
**Post date:** [15. Juni 2011 um 10:20 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/6 "2011-06-15T10:20:00Z")

</div>

modal\_open diese class seh ich in dem fenster nicht einmal. aber ok

---

<div class="post-metadata">

**Author:** ![Stephan\_Pohl](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stephan_pohl/32/10212_2.png) [@Stephan\_Pohl](https://forum.shopware.com/u/Stephan_Pohl)\
**Post date:** [15. Juni 2011 um 16:35 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/7 "2011-06-15T16:35:44Z")

</div>

Hey ottscho, am besten bindest du das „click“-Event auf diese Klasse neu und übergibst beim Aufruf der Modal in der Konfiguration deine Breite: ` (function($) { $('.modal\_open a').unbind('click').click(function(event) { event.preventDefault(); $.post(this.href, function(data) { $.modal(data, '', { 'position':'fixed', 'width': '800px' // deine Breite }).find('.close').remove(); }); }); })(jQuery); ` Viele Grüße, Stephan Pohl :shopware:

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [15. Juni 2011 um 21:16 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/8 "2011-06-15T21:16:19Z")

</div>

Danke, das sieht gut aus 😉 Werde ich morgen probieren…

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [15. Juni 2011 um 23:11 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/9 "2011-06-15T23:11:38Z")

</div>

Hey Stephan, ich hab deinen Code nun über den Link mit der klasse modal\_open eingebaut. Leider keine Änderung der Fenstergröße. `<script type="text/javascript">
				(function($) {
					$('.modal_open a').unbind('click').click(function(event) {
						event.preventDefault();
						$.post(this.href, function(data) {
						$.modal(data, '', {
							'position':'fixed',
							'width': '800px' 
							}).find('.close').remove();         
							});
						});
				})(jQuery);
				</script>`

---

<div class="post-metadata">

**Author:** ![Stephan\_Pohl](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stephan_pohl/32/10212_2.png) [@Stephan\_Pohl](https://forum.shopware.com/u/Stephan_Pohl)\
**Post date:** [16. Juni 2011 um 09:58 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/10 "2011-06-16T09:58:37Z")

</div>

Hey ottscho, habe gerade nochmal nachgeschaut. Ich hatte das "(document).ready(function() {})" vergessen gehabt und der übergebene Wert der Breite muss als Int vorliegen. [code] (function() { (document).ready(function() { (’.modal\_open a’).unbind().click(function(event) { event.preventDefault(); .post(this.href, function(data) { .modal(data, ‘’, { ‘position’:‘fixed’, ‘width’: 800 }).find(’.close’).remove(); }); }); }); })(jQuery); [/code]

---

<div class="post-metadata">

**Author:** ![ottscho](https://avatars.discourse-cdn.com/v4/letter/o/7ba0ec/32.png) [@ottscho](https://forum.shopware.com/u/ottscho)\
**Post date:** [16. Juni 2011 um 10:09 UTC](https://forum.shopware.com/t/lightbox-modal-vergrossern/3124/11 "2011-06-16T10:09:26Z")

</div>

Danke, funktioniert nun bestens 😉