zurb-foundation - Foundation 4 でモーダルを明らかにする

Question

Foundation 4でプログラムでモーダルをどのように明らかにしますか?

Foundation 3 では、使いやすい Reveal() メソッドがありました。

Foundation 4 では何を使用できますか? 助けてください。

Answer 1

残念ながら、Foundation 4 では、モーダルを開くにはこのトリガー リンクが必要です =/ 残念ながら、より多くのコードを書かなければならないからではなく (そうではありません)、この実装は、たとえば、きれいではないからです。

モーダルの私のコード:

<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
    <div id="modalContent"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

一部のコンテンツを開いてモーダルに入れるJS関数

function openModal(url,params,text){

// If @url is not empty then we change the #modalContent value with the @url value
if(url !== '')
{
    ajaxLoad('#modalContent',url,params);
}
// If @text is not empty then we change the #modalContent value with the @text value
else if(text !== '')
{
    $('#modalContent').html(text);
}

// If both @url and @text are empty, then the #modalContent remains unchanged. 
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }

それが役に立てば幸い！

Answer 2

$("#myModal").foundation('reveal', 'open');

Answer 3

プログラム（javascript）アクセスの場合、ドキュメントはクリックイベントによる起動のみを提案しているようです。

モーダルを追加します。

<div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

トリガーを設定します。

<a href="#" data-reveal-id="myModal" id="my-trigger">Click Me For A Modal</a>

プログラムでトリガーをアクティブにします。

$('#my-trigger').trigger('click');

確かに、これは回避策のように思えますが、おそらくこれは、彼らが「軽量/モバイルファースト」に重点を置いているためです. 次のリリースがもたらすものを見てみましょう。