3

モーダル フォームを使用した次の基本的な Foundation 6 セットアップは機能しています。つまり、モーダルフォームが画面に表示されると、ブラウザのサイズを変更すると適切にサイズ変更されます。

<!doctype html>
<html>
<head>
    <title>modal test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script type="text/javascript" src="js/vendor/jquery.min.js"></script>
</head>
<body>
    <div id="headerContainer">
        <a href="#" class="button" data-open="modalForm">Show Modal</a>
    </div>
    <div id="modalContainer">

        <!-- start: modalForm content -->
        <div class="reveal" data-reveal id="modalForm" role="dialog" >
            <div class="row" >
                <div class="medium-12 large-12 columns">
                    <p>modal test</p>
                    <button class="close-button" data-close aria-label="Close reveal" type="button"> <span aria-hidden="true">&times;</span> </button>
                </div>
            </div>
        </div>  
        <!-- end: modalForm content -->


    </div>
    <script src='js/foundation.min.js'></script>
    <script>
       //$("#modalContainer").load("_form-modal-test.html", function() {
        $(document).foundation();
         //});
    </script>
</body>
</html>

コンテンツを外部ファイルに配置すると、以下の例のようにロードされます。モーダル フォームのサイズが適切に変更されなくなりました。

<!doctype html>
<html>
<head>
    <title>modal test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="css/foundation.min.css">
    <script type="text/javascript" src="js/vendor/jquery.min.js"></script>
</head>
<body>
    <div id="headerContainer">
        <a href="#" class="button" data-open="modalForm">Show Modal</a>
    </div>
    <div id="modalContainer"></div>
    <script src='js/foundation.min.js'></script>
    <script>
       $("#modalContainer").load("_form-modal-test.html", function() {
        $(document).foundation();
        });
    </script>
</body>
</html>

動的にロードされたときにモーダルフォームを適切に応答させる方法を知っている人はいますか?

4

2 に答える 2

0

Foundation と同じように、強制的にサイズを変更してみてください。この例では、reveal は Foundation.Reveal(jQueryElement) を使用した変数になります。Foundation.Reveal() の別の使用例については、次のスニペットを参照してください。

$(window).resize(function(){
  reveal._setPosition();
});

少し異なる方法でロードすることもできます。このテクニックは私には合っているようです。

<div class="reveal" id="exampleModal1">
  <p>Some random text. Not loading the json file here.</p>
</div>    

<script>
  $(document).foundation();
  var modal = $('#exampleModal1');
  var reveal = new Foundation.Reveal(modal);
  $('button').click(function(){
    $.ajax('test.html')
      .done(function(resp){
        modal.html(resp);
        reveal.open();
    });
  });
</script>

http://run.plnkr.co/plunks/JcWnxTJg2Viy3qCKMUoB/を実行するか、http://plnkr.co/edit/JcWnxTJg2Viy3qCKMUoB?p=preview を編集できる Plunker をアップロードしました

于 2016-02-19T21:48:03.580 に答える
0

私の経験では、reveal コンポーネントを動的に完璧な方法で動作させるための最良の方法は、次のパターンに従うことです。

  • リビール内に実装したい HTML コードを含む文字列を返す関数を記述します (そのため、ビューには のみが表示されます)。この関数を と呼びましょうrevealHtmlFactory()。だからそれは戻ってくる<h1>My Dinamic Reveal</h1>など。
  • 次に、表示トグルとなるボタンのハンドラーを設定します。これを と呼びましょうonRevealToggle()。このハンドラーは
    1. $('#myReveal').html(revealHtmlFactory());
    2. $(document).foundation();
    3. $('#myReveal').foundation('open');

このようにして、最初に (1) ファウンデーションの初期化子を呼び出す前に、リビール内の html が希望どおりに設定されていることを確認します。そこでは、すべてのレスポンシブ クラスを動的に設定したり、異なる HTML コードを返す複数の関数を設定したりできます。次に (2) 基盤の内部状態を再初期化します。これは、何が変更されたか、どこに新しいものを追加する必要があるかなどを特定するために、ビューが再スキャンされることを保証するために必要です。情報の最後の状態を反映し、ビュー内のすべてをリロードします。

これが役立つことを願っています。

于 2019-06-03T14:10:14.467 に答える