問題タブ [zurb-reveal]

C3jsチャートはイベントをリッスンしますresize。チャートを自動的にレスポンシブにするのは良いことですが、 Foundationの Reveal modal でチャートを連携させようとすると、重大なパフォーマンスの問題が発生しました。

github issue Reveal modal triggers a resize eventresizeで述べたように、モーダルが開くたびに明らかにモーダルがイベントをトリガーします。

C3jsresizeチャートは、イベントがトリガーされるたびに再レンダリングされます。また、 C3jsresizeが提供する API またはコールバックを使用して、イベント後にチャートを再レンダリングすることを防ぐ方法はないようです。したがって、同じページ内のすべてのC3jsグラフは、モーダルが開くたびに不必要に再描画され、ブラウジング エクスペリエンスが損なわれます。

Foundationが v6 で明らかにモーダルを処理する方法を変更する前に、このパフォーマンスの問題を回避する簡単な方法はありますか?

使用されているバージョンは C3-0.4.9 とfoundation-5.5.1 です

詳細を表示するために Reveal を使用しています。その中に Slick を使用したカルーセルがあります。Reveal モーダル内のコンテンツは、AJAX 経由で取り込まれます。

私が見ている問題は、Reveal が開くと、カルーセルが最初の画像なしで読み込まれ、2 番目の画像 (読み込みに遅延がある場所) に移動し、その後正常に動作することです。例として短いビデオを次に示します: http://cl.ly/323s1T1x3I21

画像をより速くロードする方法がわかりません。

私のコードは次のようになります...

ページコード:

にプルされるページのコード:

修正方法がわからない。助けていただければ幸いです。

現在、Zurb Foundation フレームワークを使用しています。ページの読み込み時に表示されるモーダルを作成したいと考えています。このモーダルでユーザーのブラウザに Cookie を保存して、以前にサイトにアクセスした場合に同じモーダルが再度表示されないようにしたいと考えています。

これは、初期基盤に使用されるjQueryを使用してこれを実装しようとした方法です。ワードプレスでこれを実装しているため、jQuery no conflict ラッパーを使用していることに注意してください。

このコードでは目的の出力が得られません。ページの読み込み時にモーダルが何度も開き、Cookie を保存せずに、誰かが私を助けてくれれば本当にありがたいです。ありがとう

これを Foundation フォーラムに投稿しようとしましたが、何らかの理由で投稿できませんでした。

以下の最初のコード スニペットはdata-abide="ajax"、 と.on('valid.fndtn.abide',function(){});. 要素が無効などになり、モーダルが開きます。モーダルが閉じられると、必要に応じてページに残ります。

私は今、これに AJAX を使用させようとしています。リクエストは、データ挿入を処理する php スクリプトに対して行われ、成功すると要素操作とモーダルが行われます。

2 番目のコード スニペットはその試みを示していますが、これは機能していません。このコードを実行すると、アラートが発生しますが、ページが送信され、コンソールには何も書き込まれず、モーダルも表示されず、ページが更新されます。私は何を間違っていますか？

フォームとモーダルの部分的なコード (3 番目のスニペット) も含めました。

Foundation、data-abide="ajax"、および Reveal-modal を使用してフォームが送信される実際の例があれば、PHP スクリプトに対して AJAX 呼び出しが行われ、データが DB に挿入され、成功するとモーダル ウィンドウが開きます。 、サンプルを提供してください。

スニペット 1 - 作品

スニペット 2 - 機能しません

部分形式とモーダル コード

ajax 呼び出しを使用してモーダルを表示し、次の 3 つの方法のいずれかを使用して閉じています。

1. 背景のdivをクリックして

2. escキーを押すことで

3. 閉じるボタン ( X)をクリックする

そして、3つのオプションすべてで完全に正常に機能していますが、opened -> closed -> opened再び閉じられると予想される方法で閉じられません。

ここに私のhtmlコードがあります:

ここに私のJSコードがあります：

この問題を解決する方法を知っている人は誰でも助けてください。

よろしくお願いします。

私はAngular JSとzurbに非常に慣れていません.http://jsonplaceholder.typicode.com/usersにあるリモートjsonデータを表示するコントローラーを持っていますが、コントローラーの応答をzurbを使用して表の形式で表示したいと考えています。ユーザーが行をクリックすると、明らかにするモーダルがポップアップし、住所、電話番号など、特定のユーザーの完全な詳細が表示されますデータを表示しますが、zurb テーブルとグリッドを使用してフォーム テーブルに表示したいです。

jquery フォーム検証プラグインを変更しようとしているので、ajax 応答を取得したら明らかにモーダルを表示できます。

でオブジェクトにアクセスし、 でイベントを発生さwindow.Foundationせることさえできました。openwindow.Foundation.libs.reveal.open($target)

問題は、この時点でモーダルの背景は表示されますが、モーダル自体は表示されないことです。

イベントを適切に発生させる方法はありますか?

ありがとう、

X (閉じるボタン) をクリックすると、背景オーバーレイがまだ表示されます。

次の手順を実行しました \

1. リンクをクリックして、モーダルを表示します。
2. X をクリックして閉じます。

初めてはすべて問題ありませんが、同じ手順をもう一度実行すると

3. リンクをもう一度クリックして、モーダルを表示します。
4. 今回はXをクリックすると、モーダルは閉じましたが、オーバーレイはまだ存在しています。これにより、ページでのそれ以上のアクションが防止されます。

1つの解決策は、を追加するcloseOnBackgroundClick=trueことでしたが、これはできません。

私はそれをデバッグしようとしましたが、問題はtoggle_bg()機能にあることがわかりました。次にクリックすると、呼び出さthis.show(this.settings.bg)なければならない場所が呼び出されthis.hide(this.settings.bg)ます。

コードはhttps://gist.github.com/yarosla/9844359にあります