ブートストラップでポップアップモードの位置をリセットする方法は？

Question

私は自分の問題に対する解決策を探していましたが、私はそれを行うためのさまざまな方法を見ましたが、どれも私には役に立たなかった。 ここにコードを貼り付けて、何とか私を助けることができるかどうかを確認します。 ノートを表示するためのドラッグ可能なポップアップがあります。メイン画面に項目のリストがあり、ユーザーが「表示」リンクをクリックするたびに、この特定の項目の注釈がポップアップ表示されます。 すべて正常に動作しています。ポップアップが開き、正しい情報が表示され、ポップアップを画面上で動かすことができます。それでは私が持っている問題は次のとおりです： ポップアップを閉じて新しいポップアップを開くと、ポップアップを元の位置にリセットするのではなく、別の場所を離れた場所で正確に開きます。ユーザーがポップアップを閉じるときにポップアップの位置をリセットする必要があります。

これは私のjsです：

require(['jquery' 
    , 'bootstrap' 
    , 'datepicker' 
    , 'typeahead' 
    , 'combobox' 
    , 'tagsinput' 
], function($){ 

    // DOM ready 
    $(function(){ 
     $('.modal-dialog').draggable(); 

     $('#noteModal').on('show.bs.modal', function(e) { 

      //get data-id attribute of the clicked element 
      var note = $(e.relatedTarget).data('note'); 
      //populate the textbox 
      $(e.currentTarget).find('span[name="note"]').text(note); 
     }); 



    }); 
}); 

これは私のhtmlページのモーダルです：

<!-- Modal to display the Note popup --> 
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel"> 
    <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="noteModalLabel">Note</h4> 
      </div> 
      <div class="modal-body"> 
       <span name="note" id="note"></span> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

は、どのように私はユーザーが閉じる毎回ポップアップのための位置をリセットすることができますか？

THank you！あなたのクリックハンドラ内

Answer 1

、あなたはそうのようなモーダルのCSSを設定するためにjQueryのを使用することができます。

if (!$(".modal.in").length) { 
    $(".modal-dialog").css({ 
    top: 0, 
    left: 0 
    }); 
} 

これはあなたのモーダルの位置をリセットします。 JSを使用してモーダルを開いていると仮定して、JavaScriptでモーダルを呼び出す前に使用することができます。

以下のスニペットを実行してみてください。CodePen Demoこの例では、あなたのモーダルを使用してください。

// DOM ready 
 
$(function() { 
 
    $(".modal-dialog").draggable(); 
 
    $("#btn1").click(function() { 
 
    // reset modal if it isn't visible 
 
    if (!$(".modal.in").length) { 
 
     $(".modal-dialog").css({ 
 
     top: 0, 
 
     left: 0 
 
     }); 
 
    } 
 
    $("#noteModal").modal({ 
 
     backdrop: false, 
 
     show: true 
 
    }); 
 
    }); 
 

 
    $("#noteModal").on("show.bs.modal", function(e) { 
 
    var note = $('#btn1').data('note'); 
 

 
    $(e.currentTarget).find('span[name="note"]').html(note); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<!-- Modal to display the Note popup --> 
 
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel"> 
 
    <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="noteModalLabel">Note</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <span name="note" id="note"></span> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<button id="btn1" data-note="I am a note. Hello.">Show Modal</button> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

---

あなたのモーダルが開いているときに使用可能なバックグラウンドを維持したい場合は、私がhereさっきこれに対する解決策を掲載。

こちらがお役に立てば幸いです。