web-dev-qa-db-ja.com

開くときにバックグラウンドを有効にするbootstrapモーダルポップアップ

私はプロジェクトでbootstrapのモーダルポップアップを使用しており、以下のことを望んでいます：

  1. モーダルポップアップを開いて背景をクリックすると、ポップアップが閉じないようにする必要があります。
  2. モーダルポップアップの背景をぼかしてはいけません。つまり、モーダルポップアップの背景を開いても何の影響もありません。
  3. モーダルポップアップを開いた後、ユーザーは、ポップアップが閉じないようにバックグラウンドで作業することもできます。
csstwitter-bootstrapbootstrap-modal
8
user3248761

1）モデルポップアップを開いて、背景ポップアップをクリックすると、ポップアップが閉じないようにする必要があります。

モーダル定義自体にデータ属性data-keyboard="false" data-backdrop="static"を含めます。

<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
    // Modal HTML Markup
</div>

2）開いているモデルのポップアップの背景がぼやけてはいけません。つまり、モデルのポップアップの背景を開いても、何の影響もありません。

.modal-backdropプロパティ値をdisplay:none;に設定します

.modal-backdrop {
    display:none;
}

3）モデルポップアップを開いた後、ユーザーは時間ポップアップが閉じないようにバックグラウンドで作業することもできます。

.modal-open .modalに値を追加します

.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

補足：メディアクエリでは、画面サイズに応じてモーダルの幅を調整する必要がある場合があります。

免責事項：この回答は、3つすべての目標を達成する方法を示すためのものです。1つ以上のbootstrap=モーダルがある場合、上記の変更はすべてのモーダルに影響するため、カスタムセレクターの使用を強くお勧めします。

.modal-backdrop {
  display: none !important;
}
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

作業中Fiddle例

13
Shehary

backdrop = "false"は、背景の黒い画面のみを削除しますが、背景要素に対して何も実行できません。バックグラウンドをインタラクティブに保ち、完全なビューで中間位置にモーダルを維持するには、モーダル生成後にjsコードを使用して「モーダル」クラスを削除する必要があります。そして、いくつかのカスタムCSSスタイルを使用する必要があります。モーダルでカスタムクラスを追加する

_    <div class="modal fade custom-modal" id="myModal" role="dialog">
        <div class ="modal-dialog" role="document">
            <div class ="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header moveable-modal-header"></div>
               </div>
            </div> 
       </div>
    </div>
    //cs styles//
    .custom-modal{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: fit-content;
        height: fit-content;
        padding: 0 !important;
    }
    .modal-dialog{margin: 0;}

_

今モーダルを入力した後、myModal divから「モーダル」クラスを削除する必要がありますfunction openModal(){ $("#myModal").modal({backdrop:false,show:true}); $("#myModal").removeClass("modal"); //this will make modal moveable// $("#myModal .modal-dialog").draggable({ handle: ".moveable-modal-header" }); }

0
Palash