0

ZURB Foundation 5 を JS Script 'Reveal Modal' と共に使用しています。私がやりたいのは、URL 内の URL ハッシュタグでモーダル表示できるようにすることです。

引き金

<a href="#bits-n-bobs" data-reveal-id="bits-n-bobs">Bits and Bobs</a></li>

Revealモーダル

<div id="bits-n-bobs" class="reveal-modal" data-reveal>
    <h2>Bits and Bobs</h2>
    <p>Basil fawlty ron burgundy kris kristofferson.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

ハッシュタグは a href では必要ありませんが、この背後にある理由は、が使用されている場合は.no-js、java-script が検出されない場合にリンクがほとんど機能しないことを意味します。display:nonedisplay:block

必要なソリューション

<a href>モーダル ボックスを表示するときに URL の更新内でハッシュ タグを使用しているため、これは問題ではありませんが、誰かがブックマークを付けたり、ハッシュタグ付きのリンクを共有したりすると、ボックスが自動表示されるという解決策が必要です。自体。

たとえば、Bits and Bobsをクリックすると、URL が表示さsitename.com/#bits-n-bobsれ、モーダルが表示されます。私が望むのは、誰かがハッシュタグを使用してそのページにアクセスしたときにハッシュタグを使用してドメインをリンクすると、Click を必要とせずにJavaScript を使用して Reveal Modal を開くことです。

これは JavaScript で行うのはかなり簡単なことだと思いますが、それは私の最も弱い分野の 1 つであり、助けを借りたり、少なくとも正しい方向に向けてくれたりすることに感謝します。

4

1 に答える 1

1

ロード時idに URL からを取得し、この[source]window.location.hashでモーダルをトリガーできます。$('#myModal').foundation('reveal', 'open');

また、開く前に、要素が存在しid、クラスがあるかどうかを確認してください。reveal-modal

$(document).ready(function(){
   var target = $(window.location.hash);
   if(target.length > 0 && target.hasClass('reveal-modal'))  {
     target.foundation('reveal', 'open');
   }
});
于 2015-03-13T08:48:23.000 に答える