Bootstrap Modal close button not working on smaller screens

Question

For some modals, I'm using an 'x' button on the top right of the screen to close the modal. While the button works on larger devices (when the width is > 768 pixels), I've found that the button doesn't work on smaller devices (such as on mobile).

This is the HTML I use for the close button, which I got directly off the Bootstrap documentation:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span class="close-btn" aria-hidden="true">
        &times;
    </span>
</button>

I also added the class close-btn to change to font size to 2.5 em to make it larger.

Edit: Here's the full modal:

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="close-btn" aria-hidden="true">&times;</span></button>
        <div class="row">
            <div class="col-lg-12">
                <div class="modal-body">
                    <h2 class="text-center">Title here.</h2>
                    <hr class="star-primary">

                    <h3 class="text-center">
                        Text here.
                    </h3>

                    <br />
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Add the button tag inside the modal body

<div class="modal-body">
                 <button type="button" class="close close-btn" data-dismiss="modal" aria-label="Close"><span class="" aria-hidden="true">&times;</span></button>

                    <h2 class="text-center">Title here.</h2>
                    <hr class="star-primary">

                    <h3 class="text-center">
                        Text here.
                    </h3>

                    <br />
                </div>  

Here is the codepen link for reference

https://codepen.io/chandrashekhar/pen/weBOvy?editors=1100

Hope this Works..

Answer 2

Probably on small screens the button is covered by other elements. Solve it by adding a high z-index:

<button type="button" class="close my-close" data-dismiss="modal" aria-label="Close">
    <span class="close-btn" aria-hidden="true">
        &times;
    </span>
</button>

CSS:

.my-close{
    z-index:999;
}

Answer 3

Setting the position: relative; z-index: 9999 position: relative; z-index: 9999 solves the issue:

<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="position: relative; z-index: 9999">&times;</button>

Hope this works.