Learn your way!

Changing Bootstrap’s Default Modal Position

iMac With Modal

Bootstrap is one of the most popular frameworks used in developing responsive websites for mobile and desktop in HTML, CSS and Javascript. It’s something that is real easy to get started with, and a new way to start a new project. One feature that it offers is the plugins.

Bootstrap comes equipped with a lot of plugins that utilize the JQuery library. One in particular is known as the modal, which can be used to display a message, form or warning as an overlay on top of it’s current page.

A typical Bootstrap modal will look like this:

    <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> 
       <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">Modal title</h4> 
             </div>
          <div class="modal-body">
              Modal Text
          </div>
          <div class="modal-footer"> 
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
              <button type="button" class="btn btn-primary">Save changes</button> </div>
          </div>
      </div>
   </div>

Displaying a modal

A modal can be displayed when an event is trigged. For example, when the page is fully loaded, a button is clicked or even when a mouse pointer is hovering over an image. They are perfect when wanting to grab the user’s attention at any given time. What may not be perfect is the default position of the modal, which is top-center.

Changing position with just one line of code

That’s right, with just one line of code the modal can be moved all over the screen. The best part is the fact that it’s not complicated enough to make anyone want to pull their hair out. There is a catch!  The catch is that you must run it after the modal is showing or have a fixed height/width.  If there isn’t a fixed height/width then the modal has to be already showing for this to work.  The reason why it needs a fixed dimension is because when it’s hidden the height/width is technically zero and our calculations won’t be accurate.  Regardless of which method is used it’s usually ran by a triggered event.

Bootstrap provides events for most of their plugins, which come in handy.  They can be triggered at different time frames depending on whether the code should be ran at the start or the end of an event.

An example of an event that is ran at the start of a modal being shown is below:

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

});

 

Centerbootstrap modal center

$('#myModal').css("margin-top", $(window).height() / 2 - $('.modal-content').height() / 2);

This code puts a margin at the top of the modal pushing it down to the center.  It will take half the height of the window and subtract half of the height the modal.

Top-Leftbootstrap modal top left

$('#myModal').css("margin-right", $(window).width() - $('.modal-content').width());

Since the modal by default is already set to the top we just need to add a margin to the right moving the modal to the left corner.

Top-Rightboostrap modal top right

$('#myModal').css("margin-left", $(window).width() - $('.modal-content').width());

The same goes for the top right corner. The modal is already positioned at the top and all that needs to be added is a margin on the left side of the modal.

 

Conclusion

Modals are a useful plugin, and when it’s combined with the perfect position the user will never miss it!  There are other ways of doing this directly in CSS, but since this site is all about JavaScript I won’t stray off topic.

 

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
CodeWordjs Newsletter
Get up-to-date tutorials and information weekly on Javascript.
Your Information will never be shared with any third party.