• Kushal Jayswal is a frontend developer from India. His expertise includes HTML5, CSS3, Sass, LESS, Responsive Web Design, JavaScript, jQuery, Twitter Bootstrap, Material Design, AngularJS, NodeJS, WordPress and Liferay Theming. He has founded TeckStack.com in 2011 to share his frontend knowledge with the community. His core interests focus on frontend, blogging, UI, UX and many others. He loves to talk on trending frontend technologies and successful blogging.

Twitter Bootstrap - How to reposition modal popup

Twitter Bootstrap - Modal Popup

Everyone is using Twitter Bootstrap now. Even enterprise solution providers have started adopting Twitter Bootstrap as their standard framework. Bootstrap provides fantastic way to make HTML elements behave responsively per your thoughts. You can arrange them easily with different class for different screen-size. I love it. It also provides some useful JavaScript components. We can simply copy and paste CDN links into page and ready to go!

Bootstrap is highly recommended UI framework by front-end-developer world-wide. But sometimes you need to overwrite its default code to complete client's need. Here I am explaining some code for "Twitter Bootstrap - How to reposition modal pop-up with absolute position".

Twitter Bootstrap - Default Behavior

Once you done with the setup with configuration for Twitter Bootstrap Modal Popup, you can see it is coming with position: fixed. As a front-end-developer you should aware about different CSS-POSITIONS. It behaves considering the browser window as a stage. We can say BODY / HTML as a parent element.

Change The Behaviour as Per Specific Requirement

Now let's say there is a project need to overwrite default behaviour of modal popup to bound with the parent element. Means popup should open inside (or aligned to) parent DIV / element TEXTBOX.

See in action: Demo

Overwriting CSS

/* created a TESTBOX class as a PARENT ELEMENT (DIV) */
.testbox {
    background: #000000;
    color: #FFFFFF;
    padding: 10px;
    min-height: 200px;
}
.testbox .modal{ 
    color: #333;
}

/* overwriting default behaviour of Modal Popup in Bootstrap  */
body{ 
    overflow: auto !important;
}
.modal{ 
    overflow: hidden; 
}

/* created new class for targetting purpose - named ".modal2", ".modal1" */
.modal2.in{ 
    position: absolute; 
    bottom: 0; 
    right:0; 
    left: auto; 
    top: auto; 
    bottom: 0; 
    overflow: auto;
}

HTML Changes

<div class="testbox col-lg-6"> 
  <h3><strong>Test Box</strong></h3>
    
    <blockquote>
      Modal Popup should <br />open inside (or aligned to) <br />this balck DIV area.
    </blockquote>
    
    <!-- .modal1 -->
    <div class="modal fade bs-modal-sm modal1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content"> 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Default Modal Popup</h4>
                  </div>
                  
                  <div class="modal-body">
                    Modal 1 Popup Content
                  </div>
            </div>
        </div>
    </div>
    
    <!-- .modal2 -->
    <div class="modal bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content"> 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Bound to <strong>Test Box</strong> DIV</h4>
                  </div>
                  
                  <div class="modal-body">
                    Modal 2 Popup Content 
                  </div>
            </div>
        </div>
    </div>
</div>

 

Conclusion

  • Such a logic may useful when project have requirement to align pop-up with some element
  • HTML and CSS are prerequisites to understand the logic
  • Other front-end-developer may have other solution with Script as well. I have tried to give solution through CSS only
  • To understand different positions in CSS, you may read this article
  • Rahul Joshi

    Hi All,

    I am facing an issue which is regarding Bootstrap Modal coming into center but user to have scroll from window screen instead modal should open in the same position where a user clicked on it, without iframe it works perfectly fine.

    Let me try to explain more in details, App Structure is as mentioned below:

    Body*

    *header *[...] */header*

    *iFrame *[...] */ iFrame*

    *footer *[..] */footer*

    */body

    Accordingly to the content, height increases for iframe, which is working fine and don't have any issue with that.

    The main issue is that If having a lots of content within my iframe and if user clicked on button bootstrap modal opens at the center of the iFrame than user to have scroll from top or bottom to find the modal instead model should open in the same position where user clicked upon.

    after some investigation I found that e.g: mobile device having height such as 480px for iPhone 4 and Iframe height is around 1500px so below script behave accordingly to the height of iframe and make my lightbox at the center.

    /** * Vertically center Bootstrap 3 modals so they aren't always stuck at the top */

    function reposition() {

    var modal = $(this),

    dialog = modal.find('.modal-dialog');

    modal.css('display', 'block');

    // Dividing by two centers the modal exactly, but dividing by three

    // or four works better for larger screens.

    dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));

    }

    // Reposition when a modal is shown

    $('.modal').on('show.bs.modal', reposition);

    // Reposition when the window is resized

    $(window).on('resize', function() {

    $('.modal:visible').each(reposition);

    });

    For more details you could refer :

    1. https://github.com/twbs/bootstrap/issues/19586

    2. http://stackoverflow.com/questions/36131191/bootstrap-modal-coming-into-center-but-user-to-have-scroll-from-screen-in-iframe

    Live example : https://run.plnkr.co/plunks/jjfMjRpKdOrkWTMF1ePJ/

    Note: If anybody want more clarification, then please ping me up.

    Thanks in advance 

  • Hi Rahul,

    Thanks for your comment.

    As I understand your longer comment, you are looking for a solution while calling Bootstrap modal popup inside good heighted IFRAME tag. Correct me if I am wrong.

    The default functionality disabled the scroll while we calling the functionality. The same is being happened but with the outer most body/html of the IFRAME. Yet we have another body/html as parents to the iframe element.

    So we have to disable the scroll for outer body and html tag. Then we might achieve the functionality the way you want. Just to give hint while you click on a button inside iframe that should be disabled scroll for the outer most body/html.

    I would update the snippet once get free time.

    Thanks.