Bootstrap modal close button does not work

[AymaneLk]

Hello there, I used a modal with the new version of Bootsrap v5.1.0 but when I wanna close the modal It does not close, despite i changed the button target Id & I also changed the modal Id, Does anyone have any Idea In order to fix this issue?

This is the code i used:

` <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#enroll">Start The Enrollment

<!-- Modal -->
<div class="modal fade" **id="enroll"** 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">
            <p class="lead">Fill out this form and we will get back to you</p>
            <form action="">
                <div class="mb-3">
                    <label for="first-name" class="col-form-label">First Name:</label>
                    <input type="text" class="form-control" id="first-name">
                </div>
                <div class="mb-3">
                    <label for="last-name" class="col-form-label">Last Name:</label>
                    <input type="text" class="form-control" id="last-name">
                </div>
                <div class="mb-3">
                    <label for="email" class="col-form-label">Email:</label>
                    <input type="text" class="form-control" id="email">
                </div>
                <div class="mb-3">
                    <label for="phone" class="col-form-label">Phone:</label>
                    <input type="text" class="form-control" id="phone">
                </div>
            </form>
        </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>

`

[ghost]

Hey there. As a broad suggestion, you shouldn't have to add anything else to the modals to make them work, but you have to make sure naming is consistent if you change something. Considering the amount of markup in these modals, it's honestly best not to, unless there's a legit reason for it. You may want to start over with a new modal.

I have a modal that is a bit different than yours and the right attribute is data-bs-dismiss= "modal". I have that on all buttons so the modal always closes even if that button performs another action. By just looking at your code here, you need to also add data-dismiss="modal" to the second 'Yes' button, just like on the 'Close.'

Hope that's helpful.

[AymaneLk]

@christinavoudouris Thank you for your answer,I appreciate that!!

[lodhi7862]

Hey there. As a broad suggestion, you shouldn't have to add anything else to the modals to make them work, but you have to make sure naming is consistent if you change something. Considering the amount of markup in these modals, it's honestly best not to, unless there's a legit reason for it. You may want to start over with a new modal.

I have a modal that is a bit different than yours and the right attribute is data-bs-dismiss= "modal". I have that on all buttons so the modal always closes even if that button performs another action. By just looking at your code here, you need to also add data-dismiss="modal" to the second 'Yes' button, just like on the 'Close.'

Hope that's helpful.

Tysm, I resolve my issue by this...