• 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