BOOTSTRAP

Hello, can anyone help me know, why my bootstrap pop-up modal is appearing on the background and not clickable?

here is my HTML code

<div class="container">
    
    
<div class="Fixdiv">
 
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>  modal pop-up Body part</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
</div>
</div>

CSS

.Fixdiv
{
position:fixed;
top:10px;
left:10px;
}

jquery/javascript

$(document).ready(function()
 { 
    $('.modal').modal("show"); //showing pop-up when page is loaded for example
 }
);

Here is the error image

...

I am using the Bootstrap pop-up modal and select2 js dropdown inside it, Select 2 is working fine when used outside the pop-up modal, but when used inside pop-up modal, as shown in the bwlo image, dropdown is working, but search input is not working.

...

I have created bootstrap grid system in which I am showing 3 columns in the large view(using Bootstrap 3), now content of my all three div's height is not equal so How can I make them of equal height?

Here is my Demo HTML code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container" id="mycontainer">
    <section>
        <div class="row">
            <div>
                <div>
                    

                                                
                        <div class="well col-lg-3 col-md-4 col-sm-12 col-xs-12"> 
                        <a href="">
                        <h2>title 1</h2>
                        <p>Different height of data, as one can have more while other can have less</p>
                        </a> 
                        </div>
                        <div class="well col-lg-3 col-md-4 col-sm-12 col-xs-12"> 
                        <a href=""> <h2>title 2</h2>
                        <p>Different height of data, as one can have more while other can have less something more to write for test</p>
                        </a> 
                        </div>
                         <div class="well col-lg-3 col-md-4 col-sm-4 col-xs-12"> 
                        <a href=""> <h2>title 2</h2>
                        <p>Different height of data, as one can have more while other can have less something more to write for test asdasd asdsad awsdsad asdasdsad</p>
                        </a> 
                        </div>
                    
                                       
                </div>
            </div>
        </div>
    </section>
</div>

And the output of it:

...

I am using Bootstrap datepicker in my web-application, but once I have selected date, date-picker is not hiding, how can I auto-hide date-picker once date is selected? Here is the date-picker Javascript code, which I am  using