closing an instance of a lightbox with an independent button

[Haluk Karamete]

I would like this button

to close the window that the button is on!

Soi it is a simple pop iframe situation but the iframed content contains a button called CLOSE and when that is clicked, that should close the basicLightBox ( hence the iframe ).

So I got this basic set up.

<script>

var instance; // defines the variable instance as global var so both popWin and closeMe functions can refer to it. 

function popWin(theIframedContentThatHasACloseButton){
   var html = `<iframe width="100%" height="100%" style="width:100%;height:100%;" src="` + theIframedContentThatHasACloseButton + `" frameborder="0" allowfullscreen></iframe>   `;

   instance = basicLightbox.create(html).show(); // uses the global var "instance"

}


function closeMe(){
   alert('The close button is clicked'); // this works
   instance.close(); // this does not work. This should close the globally created instance but it does not! 
}

</script>

closeMe function does kick in as I get the alert but instance is not recognized.

[Tobias Reich]

I think that's possible somehow, but the question is more about the communication between a site and an iframe, not about basicLightbox. The API should provide everything you need once you got the communication working.

[Bryce Kirk]

I did it this way (more or less):

let lightboxInstance = basicLightbox.create(lightboxHtml)
lightboxInstance.show()
let closeModalBtn = document.querySelector('.modal-close') // This is a button that I've included in lightboxHtml
closeModalBtn.addEventListener('click', () => lightboxInstance.close())