Using Bootstraps Modals blocks the screen

I have been checking this for a while and still have no clue.

I am trying to use this modal in my site.

The modal appears but the entire site - including the modal itself becomes darker and cannot click anywhere to make it go away.

http://ift.tt/2lDHf4Y

Here is my code:

@extends('admin.layouts.layout-login')

@section('styles')

@stop
@section('scripts')

@stop

@section('content')



    <form class="form-horizontal" role="form" method="POST" action="">
        
        <div class="form-group">
            <input type="email" class="form-control form-control-danger" placeholder="E-mail" name="email">
        </div>
        <div class="form-group">
            <input type="password" class="form-control form-control-danger" placeholder="Password" name="password">
        </div>
        <div class="other-actions row">
            <div class="col-sm-6">
                <div class="checkbox">
                    <label class="c-input c-checkbox">
                        <input type="checkbox" name="remember">
                        <span class="c-indicator"></span>
                        Remember Password
                    </label>
                </div>
            </div>
            <div class="col-sm-6 text-sm-right" data-role="main">
                <a id="opener" href="#">Forgotten Password?</a>
            </div>
        </div>
        <button class="btn btn-theme btn-full">Log in</button>
        <div class="form-group register">
                            <a href="" class="">Register here</a>
        </div>
    </form>

<!-- Here is the example code that doesn't work-->

  <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <!-- Modal -->
      <div class="modal fade" 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">
                      <p>Some text in the modal.</p>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>

          </div>
      </div>

  </div>



@stop

I have checked that the dependencies

<link rel="stylesheet" href="http://ift.tt/2apRjw3">
  <script src="http://ift.tt/2eBd7UN"></script>
  <script src="http://ift.tt/2aHTozy"></script>

are loaded in previous sections. So the problem doesn't seem to be there. I have no clue what is going on.

via prgrm