/ /基礎4のモーダルを明らかにする - zurb-foundation

基金4 - モーダルを明らかにする - zurb-foundation

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

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

Foundation 4で何が使えますか?助けてください。

回答:

回答№1は4

私はあなたのモーダルで.foundationメソッドを単に "open"を呼び出すために使うことができると確信しています。

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

e:ちょうどドキュメントをチェックして、うん、それはすぐそこにある: http://foundation.zurb.com/docs/components/reveal.html

あなたはJavaScriptを使ってRevealを開いたり閉じたりすることもできます:


回答№2については2

残念ながら、Foundation 4ではこれを持っている必要がありますあなたがもっと多くのコードを書かなければならないので(本当ではない)、この実装がisntなので、かなり言いましょう。

モーダルのための私のコード:

<!-- 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"); }

それが役に立てば幸い!


回答№3の場合は0

プログラムによる(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");

確かにそれは回避策のように見えるかもしれませんが、これは高められた「軽量/モバイルファースト」の焦点によるものかもしれません。次のリリースがもたらすものを見てみましょう。


回答№4の場合は0
$("#myModal").foundation("reveal", "open");