2009-09-01 39 views
10

Ich verwende das Fancybox Plugin für meine modalen Fenster. Es scheint, dass egal welche Optionen ich verwende, ich kann nicht verhindern, dass das fancybox modale Fenster geschlossen wird, wenn der Benutzer außerhalb des fancybox modalen Fensters klickt (ausgegrauter Bereich).jquery fancybox - verhindern Schließen auf Klick außerhalb von fancybox

Gibt es eine Möglichkeit, den Benutzer zu zwingen, auf das X oder eine Schaltfläche zu klicken, die das Schließen-Ereignis auslösen? Das scheint so, als sollte es einfach sein, also hoffe ich, ich lese nur die Beispiele falsch.

Ich habe versucht hideOnContentClick: false, aber das scheint nicht für mich arbeiten. Irgendwelche Ideen?

+1

Es funktioniert auf dieser Website Link, den Sie gaben, haben Sie keinen Code? – waqasahmed

+0

Richtig, aber bei allen Beispielen, wenn Sie außerhalb des modalen Fensters klicken, wird es geschlossen. Ich möchte es offen bleiben, es sei denn, der Benutzer klickt auf das X (nirgendwo sonst). – Mike

Antwort

4

Es gibt keine Option dafür. Sie müssen den Quellcode ändern.

In jquery.fancybox-1.2.1.js Sie müssen Kommentar (oder löschen) Linie 341 in der _finish Methode:

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close); 
+0

Ausgezeichnet. Ich kommentierte die Zeile aus und fügte hinzu: $ ("# fancy_close) .bind (" Klick“, $ .fn.fancybox.close); Dies macht genau das, was ich brauche Dank – Mike

+1

gibt es eine Option, wie in.! cool_dev Antwort unten, die Bearbeitung des Codes wird zu Problemen führen, wenn Sie aktualisieren müssen, werden Ihre Änderungen überschrieben –

+0

Wie haben Sie die Datei gelesen.Es gibt eine Methode, um vereinheitlichte Js zu konvertieren? –

1

Fügen Sie einfach auf Ihre Funktion folgende Zeile, müssen Sie nicht auf ändern, um alles in jquery.fancybox-1.2.6.js

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");}, 
+0

Wir wollten nur dieses Verhalten auf einer der Unsere schicken Boxen, also die Quelle zu wechseln, war keine Option, Danke! – spilliton

+0

Habe gerade festgestellt, dass dies bei Google Chrome nicht funktioniert, habe noch nicht herausgefunden, warum. – spilliton

7

ich verwende fancybox 1.3.1, wenn Sie den Benutzer zwingen will nur das modale Feld zu schließen, indem Sie auf den Button klicken, können Sie festlegen, in die Konfiguration:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#your_link").fancybox({ 
     'hideOnOverlayClick':false, 
     'hideOnContentClick':false 
    }); 
    }); 
</script> 
+0

Vielen Dank! Mit fancybox 1.3.4 gearbeitet –

+1

Doesn ' t arbeiten in fancybox 2.0+ – Josh1billion

11
<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#your_link").fancybox({ 
     'hideOnOverlayClick':false, 
     'hideOnContentClick':false 
    }); 
    }); 
</script>        
3

Ich lief in das gleiche "Problem". Dieser arbeitete für mich:

$("#fancybox-overlay").unbind(); 
+1

für Version 2.1.4 können sie dies in $ ändern (". fancybox-ov erlay "). unbind(); – loQ

23
jQuery(".lightbox").fancybox({ 
     helpers  : { 
      overlay : { 
       speedIn : 0, 
       speedOut : 300, 
       opacity : 0.8, 
       css  : { 
        cursor : 'default' 
       }, 
       closeClick: false 
      } 
     }, 
    }); 
+2

Dies beantwortet nicht die ursprüngliche Frage, die fancybox v1.2.1 verwendet. Für Versionen zwischen v1.2.6 und v1.3.4 siehe @ cool_dev's Antwort. Für fancybox 2.x siehe http://stackoverflow.com/a/8404587/1055987 – JFK

+0

Funktioniert für mich! Danke für den Code sehr hilfreich! –

3

keine der oben genannten für mich gearbeitet, so schrieb ich nur eine einfache Bit für neueste Version von fancybox.

function load(parameters) { 
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>'); 
} 

$(document).ready(function() { 
    $(".various").fancybox({ 
     modal: true, 
     afterLoad: load 
    }); 
}); 

this helps :)

+1

für neuste Version von fancybox check http://stackoverflow.com/a/8404587/1055987 – JFK

2

Die $("#fancybox-overlay").unbind() Lösung für diese Frage von @Gabriel gegeben arbeitet ohne dass ich ihn an die fancybox zu binden benötigt, nachdem sie ihren Inhalt lädt, und ich konnte nicht sofort lösen. Für alle, die in dieser Ausgabe läuft, gelöst der folgende Code das Problem für mich:

$('.fancybox').fancybox({'afterLoad' : function() { 
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);} 
}); 

Die 400ms Verzögerung habe es für mich arbeiten. Es funktionierte mit 300ms, aber ich wollte kein Risiko eingehen.

5

Wenn Sie Fancybox 1.2.6 verwenden (wie ich in einem Projekt bin), fand ich die Option hideOnOverlayClick. Sie können es auf false setzen (z. B. hideOnOverlayClick: false).

Ich fand diese Option während der Untersuchung, um den Code basierend auf dem Vorschlag von Scott Dowding zu modifizieren.

0

Ich musste eine Kombination aller oben genannten Antworten verwenden, da alle Fehler enthalten. Sicherlich ist keine Bearbeitung des Quellcodes notwendig.

In meinem Fall wollte ich Overlay-Klicks deaktivieren das Schließen der Box, da ich eine Folge von Fragen hatte, die nacheinander in der Fancybox angezeigt würden, also wollte ich nicht, dass Benutzer ihren Fortschritt durch versehentliches Klicken auf das Overlay verlieren , wollte diese Funktionalität jedoch an anderer Stelle auf der Seite beibehalten.

verwenden zu deaktivieren:

$(".fancybox-overlay").unbind(); 

verwenden, um sie wieder zu aktivieren:

$(".fancybox-overlay").bind("click", $.fancybox.close); 
0

einfach den folgenden Code verwenden:

$(document).ready(function() { 
    $("a#Mypopup").fancybox({ 
     "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox 
     "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox 
     "enableEscapeButton" : false // prevents closing pressing ESCAPE key 
    }); 
    $("a#Mypopup").trigger('click'); 
}); 

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a> 
2

Stellen Sie den closeClick Parameter In der Funktion

$(".video").click(function() { 
    $.fancybox({ 
     width: 640, 
     height: 385, 
     helpers: { 
      overlay: { 
       closeClick: false 
      } 
     } 
    }); 

    return false; 
}); 
+1

bitte nicht schreien, vor allem nicht in ** Bold ** :-) – kleopatra

1

Sie die fancy box verhindern kann, indem diese Einstellung

'showCloseButton'=>false, // hide close button from fancybox 
'hideOnOverlayClick'=>false, // outside of fancybox click disabled 
'enableEscapeButton'=>false, // disable close on escape key press 

erhalten die fancybox Einstellung von folgendem Link

http://www.fancybox.net/api

6

Für diese Ausgabe, bitte versuchen Sie es auf diese Weise zu schließen

$("YourElement").fancybox({ 
helpers: { 
     overlay: { closeClick: false } //Disable click outside event 
    } 

Hoffe das hilft.

+0

das beantwortet eigentlich nicht die ursprüngliche Frage, welche benutzt fancybox v1.2.1. Für Versionen zwischen v1.2.6 und v1.3.4 siehe @ cool_dev's Antwort. Für fancybox 2.x siehe http://stackoverflow.com/a/8404587/1055987 – JFK

+0

@JKF: Danke, ich werde mein Wissen verbessern – David

-1

Sie können den Standardwert closeClick für das Overlay auf false festlegen. Hat in Version 2.1.5 für mich funktioniert.

$.fancybox.helpers.overlay.defaults.closeClick=false;