バニラJavascriptを使用したブートストラップモーダル

Question

コンポーネントA（ナビゲーション）にサイトナビゲーションがあります。 私は、コンポーネントB（BootstrapModal）で動作するブートストラップモーダルを持っています。 コンポーネントAは、ナビゲーションを表示するためにindex.htmlで参照されます。

私が達成しようとしているのは、ユーザーが "example" CSSクラスを含むnav項目をクリックしたときに、コンポーネントBからモーダルウィンドウを呼び出す方法です。

したがって、CSSクラスが存在する場合には、モーダルを呼び出すための条件文が必要です。これは、ブートストラップモーダルを使用して

Answer 1

はちょうどあなたがして、ターゲットにしたい項目のクリックイベントに、ブートストラップのAPIを使用してコンポーネントAにデータターゲット=「＃1 myModal」を追加することはできませんよされていることを

注意jQueryのでhasClass機能に基づいてif声明：

$('#myTarget').on('click', function(e) { 
    if ('#myElement').hasClass('example') { 
    $('#myModal').modal('show'); 
    } 
}); 

注：私は知っているあなたは、「バニラはJavaScript」と述べていますが、ブートストラップを使用しているという事実は、あなたが純粋な「バニラJavascriptを」使用していないことを示していると思われます。ちょうどあなたはモーダルを開くプログラム的な方法が必要です。バニラJavascriptとブートストラップは、一般的に一緒に行かない

Answer 2

jQuery(document).ready(function() { 
    jQuery('a.className').on('click', function(e) { 
      e.preventDefault(); 
      jQuery('#myModal').modal('show'); 
    }); 
});