Bootstrap v4 Modal Effect Broken

Trigger Modal with a form actually URL bar just the input form. When user clicked on a bar, Modal opens with URL bar and the name of the website. Now the problem is when modal opens and user move the cursor in the area of the modal the background bar turns to white or disturb.

Bootstrap code i tried

<!-- form trigger modal -->
<div class="input-group">
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" data-toggle="modal" data-target="#exampleModal">
    <span class="input-group-addon" id="basic-addon3">Submit</span>
</div>              

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Any Idea how to fix this .?

Bootstrap v4 Modal Effect Broken

linneaanderson