1

I am working in php/codeIgniter. However my question is related to Bootstrap Modal.
The HTML for the Modal that I have written is below:

<li><a href="#contactmodel" data-toggle="modal">Contact us</a>
    <div id="contactmodel" class="modal fade cmodal" role="dialog">
        <div class="modal-dialog modal-sm" role="document">                             
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title cus-modal-title">Contact Us | <span class="cus-modal-stitle">have your say...</span></h4>
                        </div>
                        <div class="modal-body">
                           <div class="col-md-10 col-md-offset-1 cus-model-margin">
                 <?php
                    $attributes = array('name' => 'contactform',
                    'target' => '_self',
                    'id' => 'contact', 'class' => 'htmlform' 
                     );
                     echo form_open('contactus', $attributes);
                     ?>                 
    <div class="form-group">
    <input type="text" class="form-control inputstyle-text" name="nick" id="nick" placeholder="Write your nick name ..." ng-model="nick" type="text" required pattern="^[A-Za-z]{5,15}$" title="Only alphabets allowed. Min. 2 & Max. 15" style="text-transform: lowercase">  <span class="glyphicon glyphicon-user" style="color: red"></span></input>
    </div>
    <div class="form-group">
    <input type="email" class="form-control inputstyle-text" name="email" id="email" placeholder="Write your email ..." ng-model="email" required type="email"   style="text-transform: lowercase">  <span class="glyphicon glyphicon-envelope" style="color: red"></span></input>
    </div>
    <div class="form-group">
    <textarea class="form-control text-style" rows="5" name="msg" id="msg" placeholder="Anything to say ..." ng-model="text" type="msg" required pattern="^[A-Za-z]{100,300}$" title="Only alphabets allowed. Max. 300" style="text-transform: lowercase"> </textarea>  <span class="glyphicon glyphicon-font" style="color: red"></span>
    </div>
    <div class="form-group">
    <button type="submit" name="submit" class="btn btn-primary">Send  <span class="glyphicon glyphicon-envelope" style="color: black"></span></button>
    </div>
            <?php echo form_close(); ?>             
                </div>  
                                        </div>
                                    </div>                          
                                </div>
                        </div>                          
                    </li>

I have working Bootstrap however I have added some custom css for the Modal and no more, which is below:

.cus-modal-title{

     color: black;
     text-align: left !important;

 }
 .cus-modal-stitle{

     font-size: 10px;   

  }
  .cus-model-margin{

      margin-left: 0.333333% !important;
   }
   .modal.fade.in {

      top: 40% !important;
    }
    .cmodal{

      z-index: 1051 !important;

     }
     a:focus {

        outline: thin dotted #333;
        outline: 0px auto -webkit-focus-ring-color !important; 
        outline-offset: -2px;
      }
      .cus-model-body{

        background: url('../images/content.png');

       }

I have placed the Modal in the footer with the contact-us link.
Now the issue is that the modal does not scroll with the default scroll bar of the web browser page. I am using google-chrome.
Any kind of help help will be much appreciated.

echology
  • 397
  • 2
  • 3
  • 15
  • Is this because there are [multiple modals](http://stackoverflow.com/questions/19305821/multiple-modals-overlay/24914782) on the page? – A1rPun Mar 11 '16 at 14:28
  • There are modals on the page however they are in different views as in MVC. will modals even in different views loaded on the same page have an effect ? – echology Mar 11 '16 at 14:32
  • No they will not :). I thought maybe the linked post is related to your question because you won't expect such things. – A1rPun Mar 11 '16 at 15:27
  • Are good comments are welcome. I found that I was using a custom bootstrap.css file. When I switched to the official bootstrap everything was working again. – echology Mar 11 '16 at 15:47

2 Answers2

1

The issue was resolved when I downloaded the official bootstrap css and replaced with the older one as it had been modified.

echology
  • 397
  • 2
  • 3
  • 15
0

This is because of position property applied to '.modal-dailog' class.

If you want modal to scroll with the browser scrollbar, then position must be set to fixed for '.modal-dailog' class. I think, by default, it's absolute and hides the browser's scrollbar so that user will never be able to scroll the window and modal will always be on screen.

Thanks

Manish Kumar
  • 1,131
  • 15
  • 28
  • Actually a modal-open is added to the body of html whenever a modal is opened. Now in new bootstrap css modal-open is set to hidden as default. This means as the modal is opened the scroll bar of the page is removed due to hidden property. If this is set to scroll then the modal can be scrolled as usual with the page. – echology Mar 12 '16 at 20:32
  • That means, modal dialog already have position as fixed, if its scrolling with page. Nice :-) – Manish Kumar Mar 13 '16 at 05:35
  • :-). yeah we should change it to absolute. Fixed might not work. – echology Mar 13 '16 at 10:18