ブートストラップモーダルでは、どのように表示/非表示中にDOMの位置を移動するのを止めることができますか？

Question

Bootstrap Modalとすると、モーダルが表示されると、実際にコードに配置されたDOMに表示されます。

モーダルを非表示にすると、モーダルは非表示になり、DOMの外に移動し、代わりに閉じた</body>タグの前の最後の要素として配置されます。

モーダルコードが、私が意図的にDOMに置かれた場所を明示するためのビルトインブートストラップが隠されていますか？私はモーダルコンテナの外に大きな<form>の一部を構成するフォームフィールドを含んでいるため、配置した場所が必要です。

現在の回避策
現在、モーダルは、（最初​​のページの負荷に、またはユーザがモーダルを閉じるために行動を取るときのいずれか）、私は私がそれをしたい場所にバックアップするために移動隠されているとき。

// put modal back to where I need it in the DOM when I user closes the modal 
$('#my_modal').on('hidden.bs.modal', function(e) { 
    m = $('#my_modal').detach(); 
    $('#my_form').append(m); 
}); 

// put modal back to where I need it when the page is loaded 
$(document).ready(function() { 
    m = $('#my_modal').detach(); 
    $('#my_form').append(m); 
}); 

Answer 1

確認してください：@ madalin-ivascuさんのコメントとして

$(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 able click events 
 
     $('body').removeClass(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<form> 
 
<div class="bigform-content">  
 
    <div class="wpcol-one col-md-6">   
 
     <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>-------MODAL BODY--------</p> 
 
       </div> 
 
       <div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No</button></span> 
 
<span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" >Yes</button></span> 
 

 
       </div> 
 
      </div> 
 
      <!-- /.modal-content --> 
 
     </div> 
 
     <!-- /.modal-dialog --> 
 
    </div> 
 
    <!-- /.modal --> 
 
</div> 
 
</form>

Answer 2

は、それはモーダルコードを移動しないデフォルトのブートストラップで判明。そのコメントの後、私は.modalへの参照のために私のコードベース全体を検索し、使用していたJSライブラリがそれを動かしていたことがわかりました。