web-dev-qa-db-ja.com

Bootstrap別のdiv内のモーダルウィンドウ

私のbootstrapモーダルは正常に動作しています。問題は、モーダルウィンドウ（灰色の背景を含む）を、本体ではなくWebサイトのdivに適用する必要があることです。次のようにしています。構造：

<div class="bigform-content">
    <div class="wpcol-one col-md-6">
        </div>
    <div class="wpcol-one col-md-6">
        </div>
</div>
<!-- Modal -->
        <div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-body">
                <p>You didn't move the map pin, are you sure it is on your address/house?</p>
              </div>
              <div class="modal-footer">
                <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
                <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

これでモーダルウィンドウは正しく開いていますが、最初のdivと、モーダルウィンドウが開いているときに他のdivをクリックできるようにする必要があります。

その解決策を私にくれませんか。どうもありがとう、ラルカ。

csstwitter-bootstrapmodal-dialog
15
manearaluca

これは私があなたのコードを使って少し調整した例です。

ここをクリックして、機能することを確認してください

それを解決する方法：

$(function () {
  
  //getting click event to show modal
    $('#submit-button').click(function () {
        $('#dialog_confirm_map').modal();
      
      //appending modal background inside the bigform-content
        $('.modal-backdrop').appendTo('.bigform-content');
      //removing body classes to enable click events
        $('body').removeClass();
    });

  
  //just to prove actions outside modal
    $('#help-button').click(function () {
        alert("Action with modal opened or closed");
    });
  //end just to prove actions outside modal
});
.bigform-content {
    border: solid 5px #DDD;
    margin: 30px 20px;
    overflow: hidden;
    padding:20px;
    position:relative;
}
.modal, .modal-backdrop {
    position: absolute !important;
}
.bigform-content h1 {
    margin:0;
}
.bigform-content input[type=submit] {
    margin-top:10px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bigform-content">
    <div class="wpcol-one col-md-6">
         <h1>Hi, this is my form title</h1>

    </div>
    <div class="wpcol-one col-md-6">
        <p>This is my form</p>
        <label for="field-one">Field 1:</label>
        <input id="field-one" class="form-control" type="text" />
        <label for="field-two">Field 2:</label>
        <input id="field-two" class="form-control" type="text" />
        <label for="field-three">Field 1:</label>
        <input id="field-three" class="form-control" type="text" />
        <input id="submit-button" type="submit" value="Submit my form" class="btn btn-default" />
    </div>
    <!-- Modal -->
    <div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>You didn't move the map pin, are you sure it is on your address/house?</p>
                </div>
                <div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
 <span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
<p>Content outside div and modal</p>
<p>Hope it
    <input id="help-button" type="button" value="helps" class="btn btn-success" />
</p>
19
wilsotobianco

wilsotobianco からの回答に感謝します。将来の参考のために、私のソリューションも投稿します。これは、複数のモーダルが必要な場合、すべてのモーダルで機能します。モーダルごとに追加のJSを記述する必要はありません。

通常のブートストラップと同じように設定します。トリガーは単にクラス.js-modal-rel-triggerを必要とし、属性data-toggle="modal"を削除する必要があります。これは、JSで切り替えているためです。

そして、モーダルにはカスタムクラスが必要です。私の場合は.modal-relを使用して、より小さいz-indexとposition: absolute;を指定します。

背景には、同じ理由でクラス.modal-rel-backdropも割り当てられます。

$('.js-modal-rel-trigger').click(function() {
    var modalId = $(this).attr('data-target');
    $(modalId).modal();

    $('.modal-backdrop').addClass('modal-rel-backdrop').appendTo($(modalId).parent());
    $('body').removeClass('modal-open');
});
body {
    background: #F3F5F6 !important;
}

.container {
    top: 50px;
    background: #fff;
    margin: 0 auto;
    width: 80%;
    padding: 20px;
    position: relative;
}

.modal.modal-rel {
    position: absolute;
    z-index: 51;
}

.modal-backdrop.modal-rel-backdrop {
    position: absolute;
    z-index: 50;
    // Fade for backdrop
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
    <div class="content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        <br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
        <br>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#myModal">
        Abs. Modal
    </button>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#mySecondModal">
        Second abs. modal
    </button>
    
        <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-target="#myNormalModal" data-toggle="modal">
        Default Modal
    </button>

    <!-- Modal -->
    <div class="modal modal-rel fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    Hi, I am positioned absolute!
                </div>
            </div>
        </div>
    </div>

    <div class="modal modal-rel fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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>
                    <h4 class="modal-title" id="myModalLabel">Modal Second title</h4>
                </div>
                <div class="modal-body">
                    Hi, I also am positioned absolute!
                </div>
            </div>
        </div>
    </div>
    
        <div class="modal fade" id="myNormalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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>
                    <h4 class="modal-title" id="myModalLabel">Normal Modal</h4>
                </div>
                <div class="modal-body">
                    h0i. I have fixed positioning!
                </div>
            </div>
        </div>
    </div>
</div>
0
AlexG