モバイルデバイスでブートストラップモーダルを表示

Question

データ集約型のサイトに進む前にモバイルユーザーにWIFIをオンにするよう警告するモーダルを作成しました。モバイル（xs、s）デバイスでこのモーダルを開きたいと思います。私はブートストラップ4を使用しています。

ブートストラップresponsive utilitiesをテンプレート、特にクラス.hidden-md-upに利用しようとしましたが、このクラスを使用する場所に関係なく、一部のサイト機能を無効にする残りのオーバーレイがあります。これは私がまだモーダルを開いていて、それを隠しているからです：エレガントな解決策ではありません。

私は、小さな画面/モバイルデバイスを検知するためにブートストラップを活用する方法を探しています。私は角度2を使用しているので、jQueryを避けています。私はまだプロジェクトでjQueryを使用していません。ちょうどあなたが以下のようにmatchmedia使用することができ、このボーナス機能

Answer 1

のためのライブラリのロードを避けるためにいいだろうが、それは難しいあなたがしたくない場合は

if (window.matchMedia('(max-width: 767px)').matches) { 
    //load your modal here 
} else { 
    //... 
} 

での変更をブートストラップ幅をコーディング依存しています幅をハードコードするには、この投稿をチェックしてブートストラップのサイズを決める方法を確認してください：https://stackoverflow.com/a/28373319/4553162