Görüntü kutusunun dışına tıklandığında veya görüntü eşlemi ile birleştirildiğinde esc'ye vuran ışık kutusuyla nasıl çıkılır

Görüntü eşlemelerini içeren bir proje için çalışıyorum this lightbox code. İşte bu benim projede neye benzediği her birini tıklayarak farklı bir lightbox açılacak, böylece ben her alan elemanı için bu var: bağlantılı web sitesinden olarak kullanıyorum JavaScript kodu aynıdır Görüntü kutusunun dışına tıklandığında veya görüntü eşlemi ile birleştirildiğinde esc'ye vuran ışık kutusuyla nasıl çıkılır

<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>

yukarıda, ben kolaylık olması açısından burada koyacağım:

<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>

Şu anda kutunun köşesindeki "X" e tıklayarak ışık kutusunun dışına çıkmak için sadece mümkün. Kutunun dışında herhangi bir yere tıklayarak veya esc tuşuna basarak çıkabilmek istiyorum.

kaynak

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"; 
     } 
    }

Bu bölüm, başka bir ifadeyle ilgili bölüme gitmelidir. Yardımcı olursa bana bildirin :)

kaynak

2016-04-06 15:15:26 user2205967

Düzgün yerleştirdiğimden emin değilim, içeri girdiğimde, ışık kutuları artık tıklandığında görünmez. Diğer ifadeden hemen sonra onu koymaya ve daha önce orada olanı değiştirmeye çalışıyorum. – beginner347

Cevabımı güncelledim. Fonksiyondaki her şeyi değiştirin ve bunu takın. Bunun işe yarayıp yaramayacağını görebiliyor musunuz? Ayrıca, herhangi bir hatanın çıkıp çıkmadığını görmek için konsolu kontrol ettiniz. Bunu kendim test edemiyorum. – user2205967

Maalesef, hala çalışmıyor gibi görünüyor. Şimdi vücut metnimde kodda bir değişiklik yapmam gerekip gerekmediğini merak ediyorum. "CurrentLightbox" değişkenini dahil etmem gereken bir yer var mı? Konsolda, kodda hata bulunmadığı belirtiliyor. – beginner347

Görüntü kutusunun dışına tıklandığında veya görüntü eşlemi ile birleştirildiğinde esc'ye vuran ışık kutusuyla nasıl çıkılır

cevap

İlgili konular