Twitter Bootstrapを使用して背景をぼかしてモーダルダイアログを作成する方法は？

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

2013-10-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); 
}

出典

2013-10-24 17:33:33 lucian

しかし、MSIE 9とFirefoxで動作しません。 – eugenes

IEとFirefoxで動作させる方法があります。[here]（http://stackoverflow.com/a/15813429/1563940）私は確かにそれが動作するかどうかはわかりません。 – lucian

モーダルの内側の容器は？ – lifecom

に私はこれを達成する最も簡単な方法は、モーダルが開いているときに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

出典

2013-10-24 17:41:14 ZimSystem

を削除します。だから、これは変更することなく、私の作品HTMLまたは任意の追加のJSことがあります。

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

出典

2016-06-17 11:50:45

これが最適なソリューションです。 –

これは私が探しているものです！ありがとう！ –

私はこれを試しましたが、本当にトリックはしませんでした（私はReactとReact Bootstrapを使用しています）。あなたの答えに基づいて何をしてくれたのですか？ 'body.modal-open #root { -webkit-filter：blur（5px）grayscale（90％）; } ' –

Twitter Bootstrapを使用して背景をぼかしてモーダルダイアログを作成する方法は？

答えて

関連する問題