は、ブートストラップをテーマに、ブートストラップのテーマとのリンクからdrupalの峰のDrupal 8にはDrupal 8で

Question

をカスタムクラスを追加します。これらのHTMLラッパーを持って#drupal-modal要素内のページのコンテンツ：

<div id="drupal-modal" class="modal fade in" tabindex="-1" role="dialog" style="display: block;"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 

この構造は、中に生成されます。私たちはlink上で見ることができる方法を\themes\bootstrap\js\modal.js。

リンクa.use-ajaxから要素にクラス名を渡すにはどうすればよいですか？クラス名テキストは、リンクの属性の値とすることができる。

具体的には、modal-lgまたはmodal-smクラスまたはカスタムクラスを追加したいと思います。私は他の問題を読んでいると私はこの思い付いた@Waxiする

Answer 1

ありがとう：それは何かでブロックされているようclickが動作しませんだって

$(document).on("mousedown", ".use-ajax", function() { 
    var modalClass = $(this).data('dialog-class'); 
    $(document).on('show.bs.modal','.modal', function() { 
     $('.modal-dialog',this).addClass("modal-" + modalClass); 
    }) 
}); 

は、mousedownイベントを使用する必要がありました。 そして、それはモーダルが実際にロードした後、そのHTMLはその

Answer 2

私のソリューション

HTMLの前に存在していないので、それは、.modal-dialog要素に追加することができdata-dialog-classの内容を取得している：

<a class="use-ajax" data-dialog-type="modal" href="#" data-dialog-class="your-class">Click me !</a> 

Javascript：

var modalClass; 

    $(document).on("mousedown", ".use-ajax", function() { 
     modalClass = $(this).data('dialog-class'); 
     $(document).on('show.bs.modal','.modal', function() { 
      $(this).addClass(modalClass); 
     }) 
    }); 

    // Add this part to remove the class when the modal is closed. 
    $(document).on('hide.bs.modal','.modal', function() { 
     $(this).removeClass(modalClass); 
    })