CODEWITHSUNDEEP
jquerytwitter-bootstrap-3modal-dialogcss-positionoffset
jreed121
jreed121

Reputation: 2097

Bootstrap modal moves unexpectedly on 2nd click

Sorry for the title gore, wasn't sure how to be more concise.

What I'm trying to do:

I have a modal that I want to be called from multiple buttons (dynamically created) and positioned near the buttons. With jQuery, I'm getting the .offset() of the clicked button then assigning it to the modal.

Bootply: http://www.bootply.com/lEUtR2IkeU

The JS:

$('.model-open-btn').click(function(){
  $('#pageJumpModal').show().height( '1px' ); //#pageJumpModal is the container that's hidden, .offset has problems with hidden elements, so show it first.
  var offset = $(this).offset();  //Get the button's offset
  $('#pageJumpModal > .modal-dialog').offset({top: offset.top, left: offset.left}); //Set the modal's position.
  $('#pageJumpModal').height( 'auto' ).hide(); //Reset the container's height.
});

The problem:

The first time either button is clicked, it works fine (well, I'd rather it show above, but good enough for now), but the 2nd time the modal is show then it's top position is increased by 13px.

I'm sure there's something I'm not considering,but I'm lost. I tried .position(), just getting/setting the css top and left attributes, and many other things. Time to turn to smarter minds than mine.

Upvotes: 1

Views: 540

Answers (2)

jreed121
jreed121

Reputation: 2097

So the issue was the position: absolute; for the .modal-dialog and that it was inside the container. Modals should basically be at the end of the <body> so their position will be relative to the document and nothing else.

Here's the solution: http://www.bootply.com/AkdX5Cqw9D

IMO, this is a much better alternative for anyone that has a bunch of dropdowns/menus that do similar things. I set values or anything I want to change about the modal in the data-... attributes of the calling button, then pass the values in a $.click() (which could also be done using Bootstrap's Modal events).

Upvotes: 0

Booster
Booster

Reputation: 434

try add height & top position to modal box

CSS

#pageJumpModal>.modal-dialog {
  position: absolute;
      width: 160px;
      height:160px;
      top:50px !important;
}

DEMO

I hope this helps

Upvotes: 1

Related Questions