• Create the input fields for the search.
• Create a div to contain the popup.
• Add javascript to operate the popup.
• Add a style sheet for formatting the div and popup.

Here's an example of how to use the files.

Create the input fields for the search. The key field will contain the search terms. The parameter to Blossom_doSearch is the URL to the search engine. You can add other formatting parameters to the URL, just like calling the search engine from a form. ID is the id of the search index.

<div>
	<input type="text" id="key" size="32">
	<button id="search" onclick="Blossom_doSearch('https://searchBlossom.com/query/ID')">
	Search
	</button>
</div>

Create the popup div and add javascript to operate the popup. Put the following code at the top level of the page, that is, as a child of the body.

<script src="https://searchBlossom.com/search_modal.js"></script>

Add a style sheet for formatting the div and popup. Put the following code in the head section of the page.

<link rel="stylesheet" type="text/css" href="https://searchBlossom.com/search_modal.css"/>

A refinement for the input fields. In the example above, a user has to press the search button to submit the search. Many keyboard users are accustomed to having the return key submit a form. You can add that behavior by modifying the text input field:

<div>
	<input type="text" id="key" size="32"
		onkeydown="if(event.keyCode==13) document.getElementById('search').click();"
	>
	<button id="search" onclick="Blossom_doSearch('https://searchBlossom.com/query/ID')">
</div>

Using a Style Sheet

<span class="Class_Name"> search-engine output </span>

<div class="Class_Name"> search-engine output </div>

Class	When used
Blossom_Header	The header summarizes the search results. It is the first text output after the "head" file.
Blossom_Suggestions	If the search may offer hints to improve the search query. For example, it may suggest alternatives to misspelled words or offer to relax the "nearness" constraint. If the search matched only a few pages the search engine may suggest shorter phrases that will match more. Alternatively, if the search matched a lot of pages, the search engine may suggest longer phrases that will match fewer. The block containing the phrases are enclode in a "div" of class "Blossom_Suggestions";
Blossom_BBItem	The format of the URL and description for a Best Bet. The style is opened before each item and closed after each item.
Blossom_BBTitle	The format of the title text for a Best Bet. The title appears before the first Best Bet match.
Blossom_CatNavbar	The format of the navigation bar at the top of a category search. The navigation bar lists all categories with hits. The current category is in bold font; other categories are links. This style is also used for the "file types" and "sort order" navigation bars.
Blossom_DocBlock	All of the output for each document is enclosed in a "div" of class "Blossom_DocBlock". Use this to control block-level behavior such as shading, hovering, and selecting.
Blossom_DocTitle Blossom_Link	If the search was successful, then each document matched will be displayed, beginning with the title. When the title is linked (as controlled by the "link" option), its style is controlled by "Blossom_Link". Otherwise its style is controlled by "Blossom_DocTitle".
Blossom_DocURL Blossom_Link	When the URL is linked (as controlled by the "link" option), its style is controlled by "Blossom_Link". Otherwise its style is controlled by "Blossom_DocURL".
Blossom_DocType	If a document is not HTML, then an indicator of the document type is added to the title. This class controls the style of the indicator.
Blossom_DocInfo	Used for the document size and date (as controlled by the "info" option).
Blossom_DocDesc	Used for the document description, if it has one.
Blossom_Context	Controls the style of the document extracts that show the context of each hit.
Blossom_Highlight	Used to highlight the search terms within each page extract.
Blossom_MoreButtons	Links for the "next" and "previous" pages of search results are displayed when the "more" option is used. This style controls the format of the link text.
Blossom_SearchForm	A div containing the search-again forms.

Put your style sheet into the head file for the search index.