Bootstrap Modal will not appear-CodePudding

I have added a bootstrap modal to my page but on button click it is not appearing even though I have it working in another project and it is setup the exact same way.

I'm lost with how to going about solving this, when I click on the button nothing happens.

Here is my code:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" ">

<!-- Modal -->
<div class="modal fade " id="employeedropdownscan " tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true ">
  <div class="modal-dialog modal-dialog-centered " role="document ">
    <div class="modal-content ">
        <div class="modal-header ">
        <h5 class="modal-title " id="exampleModalLongTitle ">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>

CodePudding user response：

You use CSS from Bootstrap 4.0.0 and JS from Bootstrap 3.7.7. It should not work. Let us use 3.4.1 :)
The id attribute of your modal has one extra space on the end. Let's delete it.
And we have the same extra space at the end of data-dismiss attributes. It blocks the close buttons. Let's fix it too.

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" ">

<!-- Modal -->
<div class="modal fade " id="employeedropdownscan" tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true ">
  <div class="modal-dialog" role="document">
    <div class="modal-content ">
        <div class="modal-header ">
        <h5 class="modal-title " id="exampleModalLongTitle ">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>

CodePudding user response：

Firstly, use these imports to make it work.

CSS and JavaScript versions of Bootstrap should match.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Secondly, do not put spaces at the end of attributes.

Except for imports, I was able to find two more issues in your code due to excessive spaces in HTML attributes.

Bootstrap can not find the target modal element
When the modal is opened, the close button is not working

Reason:

id="employeedropdownscan "
data-dismiss="modal "

How to fix:

id="employeedropdownscan"
data-dismiss="modal"

Full code / Working snippet

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here">

<!-- Modal -->
<div class="modal fade" id="employeedropdownscan" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true ">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">
            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>