web-dev-qa-db-ja.com

Twitter Bootstrapを使用して背景をぼかしたモーダルダイアログを作成するにはどうすればよいですか？

ブートストラップは、モーダルダイアログを表示するときにブラックアウトを使用します。背景全体にぼかし効果をかける方法は？

twitter-bootstrapbootstrap-modalblur
24
eugenes

最初にドキュメントの構造を変更する必要があります。このように見えるはずです

<body>
   <div class="supreme-container">all your content goes here except for the modal</div>
   <div id="myModal" class="modal fade">This is your modal.</div>
</body>

そして、CSSで

body.modal-open .supreme-container{
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}
41
lucian

ブートストラップを使用している場合、コンテンツはすでに何らかの種類のコンテナにあります。だから、これは、HTMLまたは追加のJSを変更する必要なく私のために機能します：

.modal-open .container-fluid, .modal-open  .container {
    -webkit-filter: blur(5px) grayscale(90%);
}
22
Gabriel Bratescu

これを達成する最も簡単な方法は、モーダルが開いているときにjQueryを使用してblurクラスをバックグラウンド要素に適用することだと思います。モーダルが閉じられたら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

7
Zim

私にとって、次の解決策はうまく機能しています

.modal-open .container-fluid, .modal-open  .container {
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}
0
Sachin from Pune