Foundation-sites: モーダルポジショニングを明らかにしますか？

何が起こっているのかを理解するのに役立つリンクはありますか？

表示できる場所で起動して実行します。その後、ログインの詳細を記載したメッセージを送信します。

わかりました、私はあなたにプライベートメッセージで詳細を送ります。

css .column、.columns {position：relative;}にルールを設定したと思います。

リビールモーダルは絶対的に配置されます。 なぜ固定されていないのかわかりません。 おそらくスクロールを有効にするためですか？

したがって、絶対的に配置されたモーダルは、最初に配置された親（class = "eight columns"）に整列します。 あなたはこのようなcssを追加してみることができます...

.reveal-modal {position：fixed;）

それがあなたが望むように機能するかどうかを確認してください

Ok。 これは、Foundationのgrid.cssの17行目からのものです。

わかった。 私はあなたのファイル名を読むことができませんでした。 私は単なるユーザーであり、zurb開発者ではありません。 修正されたものを試すか、モーダルdivをネスト解除して、htmlの下部に配置することができます。

実際、私はモーダルをColorBoxに切り替えて、バグを報告したかっただけです（それがバグであり、私の間違いではない場合）。 問題を見つけるのに助けてくれてありがとう！ 私はそれをいじくり回して何時間も費やしましたが、問題を見つけることができませんでした。

正直に言うと、このコンボの舞台裏を追うことはできません:) Revealにバグはありますか、それとも他のスタイルとの競合でしたか？

問題は、列の中にリビールモーダルを配置すると、リビールモーダルがブラウザウィンドウに整列するのではなく、その列に整列することです。 これがあなたが修正できるものかどうかはわかりません。

デフォルトとしてreveal-modalをposition：fixedに設定できるようですが、それに反対する理由があるかどうかはわかりません。

ああ、落とし穴。 ええ、Revealモーダルは、レイアウト内ではなく、ページの最後に配置されるように設計されています。固定ではなく絶対を使用するため、ページのスクロールを継続できます（必要な場合）。 ただし、これをposition：fixedに変更すると修正されます。

おそらく、ドキュメントでそれについて言及するのが最善でしょう。

2011年11月30日午後7時14分、JonathanSmileyreply @ reply.github.comは次のように書いています。

ああ、落とし穴。 ええ、Revealモーダルは、レイアウト内ではなく、ページの最後に配置されるように設計されています。固定ではなく絶対を使用するため、ページのスクロールを継続できます（必要な場合）。 ただし、これをposition：fixedに変更すると適合します。

---

このメールに直接返信するか、GitHubで表示してください。
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@ smileyj68位置：relativeがgrid.cssの.column、.columnsで何をしているのか考えてみてください。 位置：レスポンシブサイトで作業する場合、実際にスクロールする必要があるため、リビールモーダルを修正することはあまりオプションではありません。 ここでローカルに上書きしてみて、何かが壊れたかどうかをテストします。 しかし、何か洞察があれば、私はそれを聞きたいです。

この問題は私も後部で噛みました。 それが文書化されたことを望みます...

そして私、このコメントはお疲れ様でした。 ドキュメントではすべての後に置くように書かれていますが、Wordpressで使用する場合はフッターになります。 なぜそうするのかと言われたら便利でしょう。

私も。 位置に設定した後：修正済み。 オーバーフロー：スクロール; 物事はうまくいきました。

解決策はありますか？！ モーダルが大きい場合は、位置を固定することはお勧めできません。 誰かが解決策を見つけたら、ここに書いてください。 ありがとうございました！

私はまだこの問題を抱えています:(！解決策はありますか？PLZ

位置を固定に設定しても機能しません

私はなんとかそれを機能させることができました。 絶対位置から固定位置への切り替えは、foundation.cssとfoundation.min.cssを開き、両方のファイルの.reveal-modalクラスの位置を次のように変更したときに機能しました。

-絶対から固定
--top：50pxから30％（これは変更できますが、十分に下がるように変更する必要がありました）

静的HTML以外の目的でFoundationを使用している場合、これは間違いなく問題です。 ShopifyのMyFoundation Theme Frameworkにも、商品画像のモーダルポップアップに問題があります。 .reveal-modal { position：fixed; overlay：scroll}を使用すると確かに役立ちます。 しかし、それは本当の解決策ではありません。 この場合、「Reveal」は非常に醜く非現実的です。 私が見る限り、純粋なCSSでこれを修正することはできません。

発生している問題は、Revealモーダルが以前のリリースの配置親の影響を受けるため、実際には、body要素の直接の子としてRevealモーダルのみを使用する必要があることです。

バージョン4.3.2では、モーダルがbody直接の子になるように移動され、モーダルが表示されているため、CSSが原因で発生している奇妙なポジショニングの問題が軽減されるため、この問題は発生しないはずです。 。

これが4.3.2で見られる場合は、これが正しく機能することを確認するために特定の変更を加えたので、例を使用してチケットを開いてください。

この「Revealモーダルは、レイアウト内ではなく、ページの最後に配置されるように設計されています」は、初心者がこの省略に腹を立てる可能性があるため、ドキュメントに配置する必要があることに同意します。 @ smileyj68のコメントを見る前に、ウェブ全体を検索する

@ chimdi2000 4.3.2以降、適切な場所に配置されていない場合はjavascriptによって移動されるため、これは問題ではなくなりました。したがって、これ以上のドキュメントは不要だと思います。

@seantimmのヘッドアップをありがとう。 Shopify Foundation 4テーマフレームワークを更新したほうがいいと思います！

@seantimm 4.3.2でポジショニングの問題が修正されましたが、フォーム要素が

カスタム修正として、appendElementの設定を追加し、ドキュメント内の特定の場所に追加できるようにしました。 将来のリリースでこれを追加する可能性はありますか？

これは古いスレッドだと思いますが、2014年12月の時点で、まだこの問題が発生しています。 確かにそれは十分に単純な修正ですが、このようなフレームワークを使用することのポイントは、基本的なことに時間を費やす必要がなく、他の場所に時間を集中できるようにすることです。

将来のリリースでこれを具体化する計画はありますか？ モーダルが固定位置であるか絶対位置であるかを選択する機能は、優れた機能のようです。 いくつかのsass変数で実行できるようです。

@ smileyj68 、

また、すべてのプロジェクトで、reveal-bgの位置を絶対から固定に変更する必要がありました。 なぜそれが絶対に設定されるのか理解できません。

今朝（foundation-rails 5.4.5を使用して）同様の問題が発生し、 .reveal-modalに以下を追加して修正し、ページの中央に配置することで解決しました。

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}