0

フォームがあり、送信ボタンがクリックされたときにモーダルが起動するようにします。Zurb Reveal.js プラグインを使用しており、jQuery と関連する Reveal.js を呼び出しています。

私は次のコードを持っています：

<input type="submit" id="submit-button" data-reveal-id="myModal" value="Submit this support request">

そして、これはページの下部 (終了 body タグの前) にあります:

<div id="myModal" class="reveal-modal">
 <h1>Modal Title</h1>
 <p>Any content could go in here.</p>
 <a class="close-reveal-modal">&#215;</a>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#buttonForModal").click(function() {
      $("#myModal").reveal();
    });
  });
</script>

data-reveal-id は、モーダルを起動するアンカー タグがある場合に機能するため、上記の JS (プラグイン サイトで提供) を使用してプログラムで起動できると考えましたが、それも機能しないようです。ヘルプ？

4

2 に答える 2

0

ボタンは送信ボタンであるため、クリックすると、フォーム オプションに従ってページが更新されます。フォームを使用していない場合は、<button>代わりに使用する必要があります。

revealJQuery の標準メソッドではありません

<script type="text/javascript">
  $(document).ready(function() {
    $("#buttonForModal").click(function(event) {
      //Prevent form submission to avoid page refreshing 
      event.stopPropagation()

      //Show your div
      $("#myModal").fadeIn(300);
    });
  });
</script>
于 2013-02-10T11:22:04.040 に答える
0

最初にボタンのデフォルト文字を防止してから、モーダルを開く必要があります。

<script type="text/javascript">
  $(document).ready(function() {
    $("#buttonForModal").click(function(event) {
      event.preventDefault();
      $("#myModal").reveal();
    });
  });
</script>
于 2014-01-16T15:25:41.043 に答える