Please also see a screenshot illustrating how the iframe shows the header again after the Select options button is clicked and another page is loaded.

Please check the documentation.  

.et-l--header .et-l--footer h1 means to hide a h1 which is inside an element with the class .et-l--footer and inside a element with the class .et-l--header.

You like:

.et-l--header,.et-l--footer,h1

Also see the linked jquery documentation: "You can create the union of multiple disparate selectors by listing them, separated by commas. For example, the following matches all

There is another qeird thing happening, which I am unsure if it's related to the ig=frame or not, but I have tried fixing it with custom CSS with no luck at all.

When I add the extra space and negative margin to get the pop-up to display, I have to change the z-index for the iframe so that the pop-up is displayed above the content below the iframe.  As soon as this is done, a white background appears over the content as shown in the screenshot attached.  Is there some styling associated with the iframe that controls the white background that I am missing?

Sorry, I have added the commas between the CSS selectors now and it's working much better.

You can try to set the iframe to transparent. You might try to play around with the developer tools to find the best setup for you.

Best regards, Michael