enter image description hereModal opening with a form URL bar. When the user clicks on a bar, the Modal opens with the URL bar and the name of the website. The problem arises when the modal opens and the user moves the cursor over the opening bar, the background bar turns white or becomes distorted.
Here is the Bootstrap code that I tried:
<div class="container-fluid">
<!-- Form trigger modal -->
<form action="testiing bars.php" method="get" data-toggle="modal" data-target="#formModal">
<div class="form-group">
<label for="inputlg"></label>
<input class="form-control input-lg" id="inputlg" type="text" name="website">
</div>
</form>
<!-- Modal -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Submit URL</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Does anyone have any ideas on how to solve this issue?