Wie man Leuchtkasten durch das Klicken außerhalb des Kastens oder das Schlagen von ESC in Verbindung mit einer Abbildungabbildung

herauskleide Ich habe this lightbox code für ein Projekt angepasst, das ich arbeite, das Bildkarten miteinbezieht. Hier ist, wie es in meinem Projekt sieht, habe ich dies für jedes Flächenelement, so dass auf jedem Klick auf einen anderen Leuchtkasten öffnen:Wie man Leuchtkasten durch das Klicken außerhalb des Kastens oder das Schlagen von ESC in Verbindung mit einer Abbildungabbildung

<body> 
    <center><img src="Slides/Slide2.jpg" style="width:100%; height:auto;" alt="" USEMAP="#Map"></center> 
    <map name="Map" id="Map"> 
    <div id="grayBG" class="grayBox" style="display:none;"></div> 
    <div id="LightBox1" class="box_content" style="display:none;"> 
     <table cellpadding="3" cellspacing="0" border="0"> 
     <tr align="left" style="height: 100%; width: 100%;"> 
      <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right"> 
      <div>X</div> 
      <object type="text/html" data="Content/2-1.html" style="height: 400px; width: 600px;"></object> 
      </div> 
      <area alt="" title="" href="#" shape="poly" coords="145,365,540,365,540,430,144,430" onclick="displayHideBox('1'); return false;"/></td> 
     </tr> 
     </table> 
    </div> 
    </map>

Der Javascript-Code verwende ich die gleiche ist wie von der Website verlinkt oben, werde ich es hier der Einfachheit halber setzen:

<script type="text/javascript" language="javascript"> 
/* Superior Web Systems */ 
function displayHideBox(boxNumber) 
{ 
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") { 
     document.getElementById("LightBox"+boxNumber).style.display="block"; 
     document.getElementById("grayBG").style.display="block"; 
    } else { 
     document.getElementById("LightBox"+boxNumber).style.display="none"; 
     document.getElementById("grayBG").style.display="none"; 
    } 
} 
</script>

ich bin zur Zeit nur in der Lage der Leuchtkasten auf das „X“ durch einen Klick auszutreten in der Ecke der Box. Ich möchte in der Lage sein, es zu verlassen, indem ich irgendwo außerhalb des Kastens klicke oder die ESC-Taste drückst.

Quelle

2016-04-06 beginner347

if(document.getElementById("LightBox"+boxNumber).style.display=="none") { 
     document.getElementById("LightBox"+boxNumber).style.display="block"; 
     document.getElementById("grayBG").style.display="block"; 
    } else {   
var currentLightbox = document.getElementById('LightBox' + boxNumber); 
     if (!currentLightbox.is(e.target) // if the target of the click isn't the container... 
       && currentLightbox.has(e.target).length === 0) // ... nor a descendant of the container 
       || e.keyCode == 27 // if the user presses esc 
     { 
      document.getElementById("LightBox"+boxNumber).style.display="none"; 
      document.getElementById("grayBG").style.display="none"; 
     } 
    }

Dieser Teil sollte in den Abschnitt mit der Else-Anweisung gehen. Lass es mich wissen, wenn es hilft :)

Quelle

2016-04-06 15:15:26 user2205967

Ich bin mir nicht sicher, ob ich es richtig einfüge, wenn ich es einfüge, erscheinen die Leuchtkästen nicht mehr, wenn man darauf klickt. Ich versuche, es gleich nach der Else-Anweisung zu korrigieren und zu ersetzen, was vorher da war. – beginner347

Ich habe meine Antwort aktualisiert. Ersetzen Sie alles in der Funktion und fügen Sie das ein. Können Sie sehen, ob das helfen würde? Haben Sie außerdem in der Konsole überprüft, ob Fehler ausgegeben wurden? Ich kann es selbst nicht testen. – user2205967

Leider scheint es immer noch nicht zu funktionieren. Ich frage mich, ob ich jetzt den Code in meinem Körpertext ändern muss. Gibt es einen Ort, an dem ich die Variable "currentLightbox" einfügen muss? Die Konsole sagt, dass es keine Fehler im Code gibt. – beginner347

Wie man Leuchtkasten durch das Klicken außerhalb des Kastens oder das Schlagen von ESC in Verbindung mit einer Abbildungabbildung

Antwort

Verwandte Themen