ブートストラップ3を表示する灰色の背景にモーダルボックスなし

Question

小さな画面で使用するときは、自分のサイドメニューナビに取り組んでいます。

私はモーダルが表示されているときに、ブートストラップ3で起こるように、画面の残りの部分をグレーにしたいと思います。

この目的のためにブートストラップグレーの背景を再利用する方法はありますか？言い換えれば、jQueryを使用して、モーダルのない灰色の背景を表示/非表示にしますか？

この質問の目的のために、空白のHTMLページでは、モーダルなしで灰色の背景を表示したいと考えています。

ありがとうございました

Answer 1

はい、私はあなたの問題があります。それは灰色の背景とモーダルの背景を担うだけの「クラス」です。クラスは親divに存在する必要があります。あなたがクラスをトグルする必要が

HTML

<div class="modal-backdrop"> 
    <div class="child-component"> 
     <div class ="panel"></div> 
    </div> 
</div> 

CSS

.modal-backdrop { 
    background: rgba(22, 22, 22, 0.5) !important; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 9999; 
} 
.hide{ 
    display:none; 
} 

は、 '接続モーダル-背景を' '隠す' クラスでモーダルを表示/非表示します。