Pop up window modal appears, but it does not work properly. It is not active

Question

I am trying to create a pop up window modal. the modal appears but it does not work properly.

Here is the screenshot:

Here is the HTML code of the following modal:

<span class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editCard-modal"></span>

<div class="modal fade" id="editCard-modal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
   <div class="modal-dialog">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Modal Header</h4>
      </div>

      <div class="modal-body">
         Description here
      </div>

      <div class="modal-footer" id="outerCard">
         <div class="innerCard"><button type="submit" class="addTemplateButton">Save</button></div>
         <div class="innerCard"><button type="submit" class="deleteCardButton">Delete</button></div>
      </div>
   </div>
</div> <!--end of pop up window-->

Here is the CSS code:

/* Modal css for edit card */
#editCard-modal .modal-dialog
{
   border:3px solid #000000;
   border-radius:10px;
   background-color:#ECF0F1;
   padding: 10px;
}

/*display button in 1 line*/
#outerCard
{
   width:100%;
   text-align: right;
}
.innerCard
{
   display: inline-block;
}

Class Descriptions:

1. 'addTemplateButton' and 'deleteCardButton' are just CSS for customizing button.
2. 'innerCard' and 'outterCard' are for displaying the buttons in 1 line.
3. editCard-modal is for customizing the modal pop up window.

As you can see in the picture, the whole page looks faded, and I can't click any button in the modal.

Furthermore, I can't even close the modal. Usually, if I click on the rest of the page, the modal closed automatically. Now, it does not close.

I am currently designing a website. On the other page, it works properly with no issues. However, in this particular page, it doesn't.

Please help me, Thanks in advance.

Answer 1

After looking for an answer 'quite' desperately, I've found the answer.

looks like by moving the modal code make it works. I've moved the code to below right after "/container" tag or the "/body" tag.

See this link for more references: Bootstrap modal appearing under background