Open Bootstrap modal of different sizes at one common point via common css or javascript - Twitter bootstrap

Abhishek
May 26, 2017
128 views
3 votes
4 Answers

I am working on a project in which there are multiple Bootstrap modal’s of different sizes. I want to change the position of all the modal at one specific point on the screen.
I am attaching sample code in which there are 3 modals of different sizes. Modal 1 opens at proper position because i have overridden the default position properties,but the other two modal i.e. 2 and 3 are not opening at that point.
One solution is that i assign all modals a different ID and then position each modal via css but that would lead to inconsistency in design. I am unable to find common solution.

NOTE

I have more than 500 modal all are of different size i don’t want to specify position of each modal. Is there anything i can dynamically capture screen size/modal size and align my modal to one single point

.modal {
  top: 21px;
  left: -290px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Modal 3</button>

<!-- MODAL 1 -->

<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 1</h4>
      </div>
      <div class="modal-body">
        <p>This is Default Size Modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- MODAL 2 -->

<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:20%">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 2</h4>
      </div>
      <div class="modal-body">
        <p>This is small Modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- MODAL 3 -->

<div id="myModal3" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:90% !important; max-width:100% !important;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 3</h4>
      </div>
      <div class="modal-body">
        <p>This is Big Modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answers

here you have a link
https://codepen.io/kalaiselvan/pen/oWRrva
you can able to open dynamically open model by size using common function by passing size of a modal

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-info btn-lg" onclick="openModel(1)">Modal 1</button>
 <button type="button" class="btn btn-info btn-lg" onclick="openModel(2)">Modal 2</button>
 <button type="button" class="btn btn-info btn-lg" id="largeModel" onclick="openModel(3)">Modal 3</button>


<div id="myModal_default" class="modal fade" role="dialog">
 <div class="modal-dialog" >
  <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal 1</h4>
  </div>
  <div class="modal-body">
    <p>This is Default Size Modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
 </div>

<script>
function openModel(size){
  $("#myModal_default").modal('show');  
   switch (size){
    case 1:{      
      $('.modal-dialog').css({'width':'40%',
                           'height':'auto', 
                          'max-height':'100%',
                          'max-width':'600px',
                          'top': '21px',
                          'left': '-269px'});
     break;
  }
case 2:{
$('.modal-dialog').css({'width':'65%' ,
                           'height':'auto', 
                          'max-height':'100%',
                          'max-width':'850px',
                          'top': '21px',
                          'left': '-105px'});
  break;
  }case 3:{
$('.modal-dialog').css({'width':'85%',
                           'height':'auto', 
                          'max-height':'100%',
                          'max-width':'1050px'});
    break;    
  }
default:{
  $('.modal-dialog').css({'width':'80%',
                           'height':'auto', 
                          'max-height':'100%',
                          'max-width':'950px',
                          'top': '21px',
                          'left': '-290px'});
  break;
  }    
 }
}

I would use data attributes to define my modal position, or maybe my modal class which might seems better, in my example i use positions, but i would suggest you use predefined classes, the same way
example

<!-- html -->  
 <button type="button" class="btn btn-info btn-lg" data-modal-top="21px" data-modal-left="-290px" data-modal-class="modal-lg" onclick="openModel()">Modal 2</button>


var btn = e.relatedTarget;
var topposition = btn.getAttribute('data-modal-top');
var leftposition = btn.getAttribute('data-modal-left');
//do your css here, use attribute value. 
$('.modal-dialog').css({'width':'65%' ,
                       'height':'auto', 
                      'max-height':'100%',
                      'max-width':'850px',
                      'top': topposition,
                      'left': leftposition});
//or if you will use class
var modalclass= btn.getAttribute('data-modal-class');
$('.modal-cdialog').addClass(modalclass);

Remember to use !important CSS declarations as below, if you want to forcibly use the styles on all instances of .modal:

Note: this will look terrible until appropriate CSS has been added which suitable for all modal dialogues, but the idea is that the CSS is being applied to all instances.

.modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Modal 3</button>

<!-- MODAL 1 -->

<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 1</h4>
      </div>
      <div class="modal-body">
        <p>This is Default Size Modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- MODAL 2 -->

<div id="myModal2" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:20%">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 2</h4>
      </div>
      <div class="modal-body">
        <p>This is small Modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- MODAL 3 -->

<div id="myModal3" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:90% !important; max-width:100% !important;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal 3</h4>
      </div>
      <div class="modal-body">
        <p>This is Big Modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

I found this simple jS solution

$(function() {
    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);
    });
});

Please signup or login to give your own answer.

Click here to cancel reply.

Open Bootstrap modal of different sizes at one common point via common css or javascript – Twitter bootstrap

Answers