36

ブートストラップは、モーダル ダイアログを表示するときにブラックアウトを使用します。背景全体にぼかし効果を加えるにはどうすればよいですか?

4

5 に答える 5

33

ブーストラップを使用している場合、コンテンツはすでに何らかのコンテナに入っています。したがって、これは HTML や追加の JS を変更する必要なく機能します。

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}
于 2016-06-17T11:50:45.517 に答える
9

blurこれを実現する最も簡単な方法は、モーダルが開いているときに jQuery を使用して背景要素にクラスを適用することだと思います。blurモーダルが閉じているときに削除...

.blur {
    box-shadow: 0px 0px 20px 20px rgba(255,255,255,1);
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
    transform: scale(0.9);
    opacity: 0.6;
}

http://bootply.com/74705

于 2013-10-24T17:41:14.067 に答える