ブートストラップ・モーダル・イネーブル・バックグラウンド

Question

ブートストラップ・モーダルをオープンしたいがバックグラウンドのページをクリック可能にしたい。

ウェブで利用できる解決策がいくつかありますが、私が試したstackoverflow（How do I make the background of a modal clickableなど）が動作するようにはできませんでした。私はFirefoxとIE11で作業しています。開かれたヘッダまたはクリックするだけでボタンをクリックするだけでボタンのいずれか、モデルのコンテンツにものを行う、モーダルを開き、ページの横に近い様相をボタンを持っている：私はを達成しようと

モーダル。

私はこれまで多くの成功を収めていないものから、それを適応させようとしているworking Bootply exampleがあります。
（以下JavaScriptで生成されますHTMLは、私はちょうどあなたが読みやすくための出力を与える）

<div id="bootstrapModal" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
       </div> 
       <div class="modal-body"> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-success " id="submitButton">Submit</button> 
        <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Javascriptを

モーダルを：

は、これは私が持っているどのくらいです

私が得るのは、バックグラウンドのないモーダルですが、対話する可能性があります背景（背景はアクティブのように見えますが、そうではありません）。私は

$(modal).modal({backdrop: 'static', keyboard: false}); 

またはfalseでbackdropで'static'を交換すると同じ効果を得ます。

アイデア？

Answer 1

.modalクラスを変更または上書きする必要があります。あなたのウィンドウが開いているときに、あなたのWebインスペクタで背景を調べると、すべてのオブジェクトがdiv：modal,fadeとで表示されます。 「モダール」クラスには、スクリーン全体をカバーするように設定されたCSSプロパティがあり、サイトをクリックできなくすることができます。

.modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1050; 
    display: none; 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
} 

あなたは固定プロパティを削除または変更する必要がありますトップ、右は、下とは性質を残しました。ただし、固定プロパティを削除した場合は、z-indexプロパティを使用できなくなり、ポップアップにオーバーレイ効果が得られます。

Answer 2

私が問題を理解したら、モデルの背後にdivを置き、ページの全幅と高さを指定する必要があります