I'm trying to view the search results of a search box in a popup not in a page, I've created an overlay with a search results rendering in it and then choose it as the "Search result page", the results are displayed fine in the overlay but it navigates to the Overlay URL not displaying it in the same page. Is there a way to make the overlay appears without navigating to it's URL?


2 Answers 2


You can accomplish this with a bit of a workaround. In order to do it you need to first understand how overlays work.

Overlays first check if there's any item with the class overlay-source on the page if so the javascript creates an overlay wrapper. and then upon clicking of an item the overlay gets loaded into that overlay wrapper.

In both the search results and search box scenarios the actual content is rendered dynamically (after the overlay javascript is initialized hence the overlay would never get invoked). In order to fix this you would need to do the following:

1- Add any div preferably with display:none in the page and has a class of overlay-source

2- Change the rendering of the searchbox to not only display the title but add a parent div with class overlay-source and make sure the <a> links to an overlay

3- reinitialize the overlay after the searchbox results are shown (add the following link to the searchbox js XA.component.overlay.init();


This is probably outdated now, but I figured I'd update just in case anyone else comes across it!

On the search results component, add in the class "Open link in overlay". The below code exists in component-overlay.js

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.