Skip to main content
LGMTL
LGMTL
Inspiring
July 23, 2017
Answered

Bootstrap Modal causing background images to jump

  • July 23, 2017
  • 2 replies
  • 12529 views

I've set some links to open up a modal window on click but when the modal window closes I noticed the background image of the page "jumps" a bit.  The image grows slightly then goes back to original shape.  Really strange, I'm using the built-in Bootstrap Modal class to open the window.

To replicate:

  1. URL:Supreme - VISION
  2. Click on a right side bar item http://prntscr.com/fzb8xn
  3. Then close the window and you'll see the background move slightly http://prntscr.com/fzb9qf

Could the movement be caused by the modal class telling the browser to remove scrolling then once the modal is closed the scrollbars reappear making it look like the image is shifting, or some type of overflow setting on the modal class perhaps?

Here's what I have:

.modal {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1050;

  display: none;

  overflow: hidden;

  -webkit-overflow-scrolling: touch;

  outline: 0;

}

.modal.fade .modal-dialog {

  -webkit-transition: -webkit-transform .3s ease-out;

       -o-transition:      -o-transform .3s ease-out;

          transition:         transform .3s ease-out;

  -webkit-transform: translate(0, -25%);

      -ms-transform: translate(0, -25%);

       -o-transform: translate(0, -25%);

          transform: translate(0, -25%);

}

.modal.in .modal-dialog {

  -webkit-transform: translate(0, 0);

      -ms-transform: translate(0, 0);

       -o-transform: translate(0, 0);

          transform: translate(0, 0);

}

.modal-open .modal {

  overflow-x: hidden;

  overflow-y: auto;

}

.modal-dialog {

  position: relative;

  width: auto;

  margin: 10px;

}

.modal-content {

  position: relative;

  background-color: #fff;

  -webkit-background-clip: padding-box;

          background-clip: padding-box;

  border: 1px solid #999;

  border: 1px solid rgba(0, 0, 0, .2);

  border-radius: 6px;

  outline: 0;

  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

  margin-left: auto;

  margin-right: auto;

  margin-top: 200px;

  width: 40%;

  height: auto;

}

.modal-content-pic {

  position: relative;

  background-color: #fff;

  -webkit-background-clip: padding-box;

          background-clip: padding-box;

  border: 1px solid #999;

  border: 1px solid rgba(0, 0, 0, .2);

  border-radius: 6px;

  outline: 0;

  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  width: 70%;

  height: auto;

}

.modal-backdrop {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1040;

  background-color: #000;

}

.modal-backdrop.fade {

  filter: alpha(opacity=0);

  opacity: 0;

}

.modal-backdrop.in {

  filter: alpha(opacity=50);

  opacity: .5;

}

.modal-header {

  padding: 15px;

  border-bottom: 1px solid #e5e5e5;

}

.modal-header .close {

  margin-top: -2px;

}

.modal-title {

  margin: 0;

  line-height: 1.42857143;

}

.modal-body {

  position: relative;

  padding: 25px;

  overflow: auto;

}

.modal-footer {

  padding: 15px;

  text-align: right;

  border-top: 1px solid #e5e5e5;

}

.modal-footer .btn + .btn {

  margin-bottom: 0;

  margin-left: 5px;

}

.modal-footer .btn-group .btn + .btn {

  margin-left: -1px;

}

.modal-footer .btn-block + .btn-block {

  margin-left: 0;

}

.modal-scrollbar-measure {

  position: absolute;

  top: -9999px;

  width: 50px;

  height: 50px;

  overflow: scroll;

}

Frank

    This topic has been closed for replies.
    Correct answer LGMTL

    brandonw6890098  wrote

    Update:  The simplest fix I found to not have the images move was to add the following CSS... it's not perfect but makes it less obvious. Apparently it's a known issue.

    .modal {
    overflow    -y: auto;
    }

    .modal-open {
    overflow    : auto;

    }

    Frank

    That just causes the text box on the page to jump and is even more noticable and annoying.

    Build one that works as you want it to work, with less html code to boot.

    Here's the html code (yes that's all you need). The images are pulled in to just the 1 modal overlay using jQuery and the link attributes.

    <div class="page-overlay">

    <div class="lightbox-wrapper">

    <div class="lightbox-content">

    <p class="close-lightbox">X</p>

    <div class="append-content">

    </div>

    <!-- end append-content -->

    <button type="button" class="btn btn-default close-overlay">Close</button>

    </div>

    <!-- end lightbox-content -->

    </div>

    <!-- end lightbox-wrapper -->

    </div>

    <!-- end page-overlay -->

    Here's the jQuery for the modal window.

    <script>

    $(document).ready(function(){

    $('.page-overlay, .lightbox-wrapper').hide();

    $('a').click(function(){

    var imgBig = $(this).attr('img');

    var caption = $(this).attr('cap');

    $('.append-content').html('<h4>' + caption +'</h4>' + '<img src="' + imgBig +'" alt="">');

    $('.page-overlay').fadeIn();

    $('.lightbox-wrapper').slideDown();

    return: false;

    });

    $('.close-lightbox, .close-overlay').css('cursor','pointer').click(function() {

    $('.page-overlay').fadeOut();

    $('.lightbox-wrapper').slideUp();

    });

    });

    </script>

    Here's the css:

    .page-overlay{

    position:fixed;

    left: 0px;

    top: 0px;

    height: 100%;

    width:100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 200;

    }

    .lightbox-wrapper {

    height: 100%;

    width: 70%;

    margin: 0 auto;

    }

    .lightbox-content {

    position: relative;

    top: 50%;

    transform: translateY(-50%);

    background-color: #fff;

    text-align: center;

    border-radius: 7px;

    padding: 25px;

    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

    overflow: hidden;

    }

    .lightbox-content img {

    max-width: 100%;

    height: auto;

    }

    .close-lightbox {

    position: absolute;

    right: 25px;

    top: 15px;

    padding: 10px 0 10px 0;

    margin: 0;

    color: #AFAFAF;

    }

    .append-content h4 {

    padding: 0 0 25px 0;

    margin: 0;

    font-weight: 400;

    }

    @media only screen and (max-width : 768px) {

    #lightbox-wrapper {

    width: 90%;

    margin: 0 auto;

    }

    }

    .btn-default {

    float: right;

    margin: 20px 0 0 0;

    background: rgba(0, 0, 0, 0.2);

    }

    .btn-default:hover {

    background: #FF864C;

    color: #fff;

    }

    Here is your Black Vision link:

    <li><a href="#" title="Black" cap="Black Vision" img="http://www.supremem.com/new_2017/images/products/vision/vision_blk.jpg"><img src="images/products/vision/vision_black.jpg" alt="Black" width="60" height="43" class="img-responsive"/></a></span></li>

    Other links will follow the same code patttern:

    <li><a href="#" title="Charcoal" cap="Charcoal" img="http://www.supremem.com/new_2017/images/products/charcoal.jpg"><img src="images/products/vision/vision_black.jpg" alt="Black" width="60" height="43" class="img-responsive"/></a></span></li>


    Osgood,

    Wow, thanks for the detailed explanation.  I'll give that a shot and see how it goes, I guess this is one of those strange things about BS, it's not the end of the world and doesn't affect everyone but I know it's there and just annoying as hell.  Really appreciate the help.

    UPDATE: found this solution that seems to be simple and worked:

    .modal-open {

      padding-right: 0 !important;

    }

    html {

      overflow-y: scroll !important;

    }

    Seems simple enough workaround but what a pain to have to do, I see what you mean by all the little quirks in BS.

    2 replies

    E
    excited_project15D5
    Participating Frequently
    March 8, 2018

    brandonw6890098

    REALLY THANK YOU !

    Nancy OShea
    Nancy OShea
    Community Expert
    July 23, 2017

    Alll I see is the appearance of the browser's vertical scrollbar.  Your images are not doing anything unusual.  

    Nancy

    Nancy O'Shea— Product User & Community Expert
    LGMTL
    LGMTLAuthor
    Inspiring
    July 23, 2017

    Thanks for your reply.  It seems to do it for higher screen resolutions, I'm at 4k  3840 x 2160.  The images themselves are at 3840 x 2160 and I'm guessing because it's responsive it's scaling automatically to accommodate the lack of scrollbars perhaps that's why it's only affecting higher resolutions...

    BenPleysier
    BenPleysier
    Community Expert
    July 25, 2017

    brandonw6890098  wrote

    }Seems simple enough workaround but what a pain to have to do, I see what you mean by all the little quirks in BS.

    Its good to know that there is a simple work-around, I would have thought that the Bootstrap 'experts' in the forum could have helped you out but they are obviously not as familar with Bootstrap as they should be given they use it as their main weapon.

    The reason I prefer not to use a frameworks is because they are littered with little quirks such as this and for the more discerning its unacceptable. What time a framework is supposedly meant to save is negated by all the time spent trying to find out the cause of the quirks.


    Actually, I haven't found it to be a problem. But if you need a workaround, all you need to do is add the following script

    $('#mediaModal').bind('hidden.bs.modal', function () {

         $("html").css("margin-right", "0px");

    });

    $('#mediaModal').bind('show.bs.modal', function () {

         $("html").css("margin-right", "-16px");

    });

    where #mediaModal is the ID of the modal.

    To see the difference:

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices