0

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

テンプレート、特に class でブートストラップレスポンシブ ユーティリティを活用しようとしました.hidden-md-upが、このクラスをどこで使用しても、一部のサイト機能を無効にするオーバーレイが残ります。これは、私がまだモーダルを開いてから隠しているためです。エレガントなソリューションではありません。

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

4

1 に答える 1

1

以下のように matchmedia を使用できますが、ブートストラップが変化する幅をハードコーディングする必要があります。

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

幅をハードコーディングしたくない場合は、この投稿をチェックして、ブートストラップ サイズの中断を判断する方法を確認してください: https://stackoverflow.com/a/28373319/4553162

于 2016-11-24T07:03:12.177 に答える