The code which used itself should work fine without any issues. Add the data-target attribute to your anchor tag and see if it works.

Change your anchor tag code as I mentioned below. This should work fine.

<a href="#test" data-toggle="modal" data-target="#test" class="more-link"></a>

I tested in my local machine and it works fine, but some CSS properties can create a problem like that.

please check some steps

• your z-index is greater than your body or parent tag
• you have data-target property in your anchor tag
• must include jquery & bootstrap.js script in your file

WORKING EXAMPLE

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Stackoverflow</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

<a href="#test" data-toggle="modal" data-target="#test" class="more-link">Open Modal</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

You can open modal by using data-target:

<a href="#" data-toggle="modal" data-target="#test" class="more-link"></a>

I am calling a modal Pop Up with a HREF and when I click it is supose to call a Modal but it is only making my background grey and it doesn’t show nothing.
I have the following code:

<div class="modal fade" id="test" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                HELLO MY PEOPLE
            </div>
        </div>
    </div>
</div>

The HREF click:

<a href="#test" data-toggle="modal" class="more-link"></a>

Am I doing something wrong? It’s my bootstrap CSS messed up? When I change the modals to Containers it shows, but it Shows in a bad way and I really need the modals, am I doing something wrong?