iFrame を使用して動的ヘッダーをロードする Web ページがあります (簡単に言えば、Shopify ページを含む大きなサイトがあります。サイトの他のすべてのページは Ektron ウィジェットを使用してヘッダーをロードしますが、できません)。それはShopifyコードにあるので、代わりにiFrameを使用して別のページからヘッダーをロードしています)。ヘッダーには、機能する必要があるボタンと、ログイン ボタンをクリックすると開くモーダル ウィンドウがあります。モーダルウィンドウが問題です。私の iFrame は現在、ヘッダー自体のサイズ (330px) です。iFrame ウィンドウがそれよりも大きい場合、ページの下部にあるコンテンツが覆われ、それらのボタンがクリックできなくなります。「pointer-events:none」を iFrame に追加できません。これは、iFrame ヘッダーのボタンが機能する必要があるためです。ただし、ログインモーダルが開くと、iFrame は全体を表示するのに十分な大きさではないため、カットオフされます。また、iFrame の高さを 1000px に設定し、z-index を使用して他のコンテンツの背後に配置することもできません。これを行うと、Shopify ページのコンテンツがモーダル ウィンドウの上に表示されるためです。
私が最後に試したのは、iFrame の高さを動的に変更して、ログイン ボタンをクリックすると iFrame の高さが増加してモーダル全体が表示されるようにすることでした。ただし、iFrame コンテンツのドメインは Shopify ページとは異なるため、iFrame をヘッダー ドキュメントの親としてターゲットにすることはできません。
私が本当にやりたいことは、iFrame の高さをモーダル ウィンドウを表示するのに十分な大きさにすることですが、iFrame のボタンを無効にすることなく、iFrame の背後にあるボタンをクリックできるようにすることです。ボタンを div と div の両方で有効にする方法はありますか?