Bootstrap v4 Modal Effect Broken

1

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 .?

2

It works for me: https://codepen.io/benjaminvanzwienen/pen/yzGeLg
Have you added all dependencies?

3

Yes already included… I upload a picture i wish you can see the exact problem, also tried on codepen samething happened.

https://ibb.co/fSbmi6 For Pic

4

So it also happens on the pen I created? Have you tried different browsers?

5

just tried in Mozilla latest version…
Problem Solve now lol. Can you tell me why is this happening in chrome .? because I made this project not only for mozilla users. Is there any thing i can do solve this in chrome .? and Thanks

6

It might be the input getting focus that messes it up. Not sure if you are supposed to use an input as a toggle for a modal.

7

Ben I don’t understand the meaning of focus here, not using input as a toggle.

8

Clicking the <input> triggers the modal. I don’t think the modal is meant to be used with an <input>.

Anyway, why would you want clicking an <input> to open a modal?

9

You are right, i should change it with the form tags.
I get it its a known issue in bootstrap github. Its a bug in bootstrap with windows chrome browsers.
Check it here: artifacts with Chrome on Windows · Issue #24233 · twbs/bootstrap · GitHub

I will try the fix update of bootstrap. Thanks Ben you really helped me alot.

1 Like