Lightbox - Close the overlay when clicking on a same page link

That feature are broken since we auto-added the close button by default on every overlay.
This fix is similar to https://github.com/wet-boew/wet-boew/blob/master/src/plugins/overlay/overlay.js#L264

site/pages/docs/ref/lightbox/lightbox-en.hbs

@@ -209,6 +209,14 @@
 	</table>
 </section>
 
+<section>
+	<h2>Test case</h2>
+	<dl>
+		<dt><a href="test/click-on-same-page-link.html">Click on the same page link</a></dt>
+		<dd>Ensuring the dialog close when clicking on a link inside the opened dialog that are pointing to a location outside the dialog context, like futher down in the page.</dd>
+	</dl>
+</section>
+
 <section>
 	<h2>Source code</h2>
 	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/lightbox">Lightbox source code on GitHub</a></p>

site/pages/docs/ref/lightbox/lightbox-fr.hbs

@@ -210,6 +210,15 @@
 	</table>
 </section>
 
+<section>
+	<h2>Cas de mise à l'essai</h2>
+	<p>Les cas de mise à l'essai suivant sont seulement disponible en anglais.</p>
+	<dl lang="en">
+		<dt><a href="test/click-on-same-page-link.html">Click on the same page link</a></dt>
+		<dd>Ensuring the dialog close when clicking on a link inside the opened dialog that are pointing to a location outside the dialog context, like futher down in the page.</dd>
+	</dl>
+</section>
+
 <section>
 	<h2>Code source</h2>
 	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/lightbox">Code source du Lightbox sur GitHub</a></p>

site/pages/docs/ref/lightbox/test/click-on-same-page-link.hbs

@@ -0,0 +1,72 @@
+---
+{
+	"title": "Lightbox",
+	"language": "en",
+	"category": "Test",
+	"description": "Test case to close the lightbox overlay when clicking on a same page link.",
+	"tag": "lightbox",
+	"parentdir": "lightbox/test",
+	"altLangPrefix": "../lightbox",
+	"dateModified": "2018-09-05"
+}
+---
+
+<p>Test case to close the lightbox overlay when clicking on a same page link.</p>
+
+<h2>Test steps</h2>
+
+<ol>
+	<li>Click on the following link
+		<ul>
+			<li>An overlay open in the middle of the page</li>
+		</ul>
+	</li>
+	<li>In the overlay, click on inner link.
+		<ul>
+			<li>The overlay close</li>
+			<li>The focus are moved to the referencied anchor</li>
+		</ul>
+	</li>
+	<li>The user are now focusing content outside the overlay scope</li>
+</ol>
+
+<h2>Test</h2>
+
+<p><a href="#centred-popup-id" aria-controls="centred-popup-id" class="wb-lbx" role="button">Centred popup (Lightbox)</a></p>
+
+<div class="text-muted">
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+	<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+	<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+	<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+	<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+	<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+	<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+	<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
+	<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+</div>
+
+<h3 id="my-in-popup-goto-section">My in popup goto section</h3>
+
+<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+
+<section id="centred-popup-id" class="mfp-hide modal-dialog modal-content overlay-def">
+	<header class="modal-header">
+		<h3 class="modal-title">Centred popup (Lightbox)</h3>
+	</header>
+	<div class="modal-body">
+		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
+		<p><a href="#my-in-popup-goto-section">Link to: My in popup goto section</a></p>
+	</div>
+</section>

src/plugins/lightbox/lightbox.js

@@ -309,23 +309,19 @@ $document.on( "click vclick", ".mfp-wrap a[href^='#']", function( event ) {
 		$lightbox = $( eventTarget ).closest( ".mfp-wrap" );
 		linkTarget = document.getElementById( eventTarget.getAttribute( "href" ).substring( 1 ) );
 
-		// Ignore same page links to within the overlay and modal popups
+		// Ignore same page links to within the overlay
 		if ( linkTarget && !$.contains( $lightbox[ 0 ], linkTarget ) ) {
-			if ( $lightbox.find( ".popup-modal-dismiss" ).length === 0 ) {
 
-				// Stop propagation of the click event
-				if ( event.stopPropagation ) {
-					event.stopImmediatePropagation();
-				} else {
-					event.cancelBubble = true;
-				}
-
-				// Close the overlay and set focus to the same page link
-				$.magnificPopup.close();
-				$( linkTarget ).trigger( setFocusEvent );
+			// Stop propagation of the click event
+			if ( event.stopPropagation ) {
+				event.stopImmediatePropagation();
 			} else {
-				return false;
+				event.cancelBubble = true;
 			}
+
+			// Close the overlay and set focus to the same page link
+			$.magnificPopup.close();
+			$( linkTarget ).trigger( setFocusEvent );
 		}
 	}
 } );