How to reset position for popup modal with Bootstrap?

Question

I was looking for a solution to my problem and I saw a lot of different ways to do that but none of them worked to me. I'll paste my code here and see if you can help me somehow. I have a draggable popup to display a note. There is a list of items on the main screen and everytime the user clicks on the "View" link it opens the popup with the Note for this specific item. Everything is working properly. The popup opens with the right information and I can move the popup around the screen. Then only problem I have is: Once I close the popup and open a new one, instead of reseting the popup to the original position it opens exactly where I left the other one. I need to reset the position for the popup when the user closes it.

This is my 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);
        });



    });
});

This is the modal on my html page:

<!-- 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>

How can I reset the position for the popup everytime the user closes it?

THank you!

score 4 · Accepted Answer · answered Aug 31 '17 at 16:26

Inside your click handler, you can use JQuery to set the css of the modal like so:

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

This will reset the position of your modal. You can use it before you call your modal in your JavaScript, assuming you are using JS to open your modal.

Try running the snippet below or see this CodePen Demo for an example of this using your modal.

// 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>

If you want to keep the background usable while your modal is open, I posted a solution to this a little while ago here.

I hope this helps!

Thank you! With that I'm starting to get somewhere... It's not reseting the popup but only for the last element on my list. I'll try applying some changes here to see how it goes :) — Igor, Aug 31 '17 at 16:40
Dan, I was able to make it work on the CodePen by modifying the js code to get the button.className instead of getting it by ID. It worked fine there, but when I do that on my code it doesn't work. Then I tried to add the onclick calling a function named resetModal that contains the code you mentioned. I can see the function is called on the console but nothing happens. The modal doesn't open. Any idea about what might be happening? — Igor, Aug 31 '17 at 17:41
Are you triggering you modal with JavaScript or are you using `data-toggle="modal"`? Could post more of your code? Another possibility would be setting the css inside of your `show.bs.modal` function - here's a [CodePen Demo](https://codepen.io/dankreiger5/pen/Xaowoq) of that. — Dan Kreiger, Aug 31 '17 at 18:34

How to reset position for popup modal with Bootstrap?

1 Answers1