CODEWITHSUNDEEP
javascriptjquerycssangularjstwitter-bootstrap
Khoi Nguyen
Khoi Nguyen

Reputation: 1092

Bootstrap modal automatically adds a margin-right at second opening modal

I'm implementing a Bootstrap HTML application that using Modal as confirm dialog, and it could be a modal inside another one. For example I open modal, then I click something on that modal, the first one will be hidden, and open another modal.

From Bootstrap 3.3.6, they are supporting to add a margin-right automatically, and hide the vertical scroll bar, however once the second modal is opened, the scroll bar is not disappeared, and if I close and open again these modals several times, the margin-right will be increased from 17px to 17x2px, and 17x3px ...

I don't know how to solve that problem with Bootstrap modal, or any workaround, I'm also thinking about Angular that keep only 1 modal, and change the modal content (including header, body, and footer), and each modal will be introduced in a separated HTML template, and angular will load a particular template for each modal, but I'm not have much experience with these workaround with Angular.

Here is the sample page that I created for my problem, the page had long content, with Open Modal button, click to open first modal, then click on Open Second Modal to dismiss the first one and open the second one. If you do that several time, you can see that the margin right is increased, and a white line at the right.

http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview

Upvotes: 1

Views: 2803

Answers (2)

Vijay Patel
Vijay Patel

Reputation: 81

You can easily handle using stylesheet according bootstrap modal display once into another bootstrap modal.

    <html>
    <head>

       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
      <body>
        <button type="button" class="btn btn-primary" id="myBtn">Click here</button>

      <div class="modal fade modal-admin" id="myModal" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
     <div class="modal fade " id="myModal1" role="dialog">
        <div class="modal-dialog">
        
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
            </div>
          </div>
          
        </div>
      </div>
    </body>
    <script>
    $(document).ready(function(){
        $("#myBtn").click(function(){
            $("#myModal").modal();
        });
    });
    $(document).ready(function(){
        $("#close").click(function(){
            $('.modal-admin').css('width', '500px');
        });
    });
      
      $(document).ready(function(){
        $("#modelbtn").click(function(){
             $('.modal-admin').css('width', '200px');
             
             $("#myModal1").modal();
             $('#myModal1').css('margin-left', '200px');
                                 
        });
    });
    </script>
    </html>

Upvotes: 0

Wasimakram Mulla
Wasimakram Mulla

Reputation: 511

You have written data-dismiss and data-target on one click itself, which is not wrong but internally bootstrap modal has an animate function which takes its own time (appx 500ms). So it would be better if you control it through jqyery.

see below code.

$("#secondModal").click(function(){
    $("#firstModal").modal('hide');
    setTimeout(function(){
        $("#secondModal").modal("show");
    },500)
});

The modal method is already integrated within the bootstrap.js which you use. So it will not show your margin which occurs at runtime.

Upvotes: 0

Related Questions