Came across this block on Jakson’s video. I am building a site using block themes and one of the pain points is the lack of a good search option which opens a search box in a modal. I thought I could use this to trigger a good search solution like Ajax Search Lite or Ivory Search and it works.
I am a non-developer, so can you tell me if this can be styled like the search modal on petapixel.com using some css. I can use chatgpt to generate the code.
It is possible yes, though it might not be that easy to accomplish. You would put a modal inside your FSE header template part that contains your search block, and then create a button that triggers it to open.
From that point you will be writing a lot of CSS, but you could create a similar effect with enough CSS, yes.
I managed to add a Search Block (Ivory Search) inside your Light Modal block. Used some CSS generated from chatgpt (i am a non-coder) and it is almost like how I want it to look.
However, I am facing an issue with –
When I trigger the search and the Ivory Search / Ajaxz Search Lite plugin shows the results in an Ajax drop down, it stays open even when I click the modal close button or click anywhere else on the site. The light modal window closes but the search results from the Ivory Search or Ajax Search Lite plugin stays open. I have to click again somewhere else on the page to close this. So 1 click on any part of the page outside the modal closes the Modal but keeps the Ajax Search results window open and then i have to click again to close the results window.
I have asked them (Ivory Search, Ajax Search devs) about this on the forum but havent gotten a reply yet. It only happens when I use it inside the Light Modal Plugin. So can you guide me why this might be happening and what can be done to mitigate this?
Ajax Search triggered and results shown in a drop down
Although I would say that if I use a regular non-ajax search, this is working like the petapixel.com (except the smooth appearance animation which i do not care for) implementation. So I am good that way but the ajax part can make it even better.
Would it be possible to share a link to where this is happening? I installed Ivory Search to do a test, and placed it inside a light modal block, and when clicking the X or outside the modal the search results close with the modal.
I am currently testing this on a Local WP installation. So not sure if I can share a link. But I tried with Ivory Search and Ajax Search Lite and find the same behaviour of the modal and search results not closing when user clicks outside the modal or search results. what I did observe is if I test this on desktop mode (browser) the modal/search results box closes when user clicks outside BUT when i resize the browser for different responsive resolutions, then on the first click outside closes the modal and on second click closes the search results box.
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Using this to trigger Modal Search’ is closed to new replies.
