Error in modal call with bootstrap 4 and jquery with id= "#"

Question

So guys, I created a modal as follows:

<div class="modal fade" id="#siteModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Softwares</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <p>...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">CERTO</button>
            </div>
        </div>
    </div>
</div>

But when I make the following call:

<a href="#" class="card-link mb-1  txt btn btn-outline-dark" data-toggle="modal" data-target="#siteModal">SAIBA MAIS</a>

The modal is not called, because it is conflicting with the layout one-page style, because it is using the id="#" which is equal to the href of the link that will call the modal. How do I make the modal appear? Any suggestions? Because when I click on the button it plays to the top of the site, obeying the id="#"

Answer 1

The problem is not the href, it does not conflict. The problem with your code is that in the id is with #.

Removing will have no problems. Follow the corrected code below:

<div class="modal fade" id="siteModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Softwares</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <p>...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">CERTO</button>
            </div>
        </div>
    </div>
</div>

Or if you want for some reason to keep the # modal id. Simply change the link code to the following:

<a href="#asd" class="card-link mb-1  txt btn btn-outline-dark" data-toggle="modal" data-target="#\#siteModal">SAIBA MAIS</a>

Answer 2

You can also open the modal

1. placing as value of the href attribute of the tag a the value #siteModal
2. Removing the game from the old (wire or octothorpe) # of modal id

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="siteModal" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Softwares</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                    <p>...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">CERTO</button>
            </div>
        </div>
    </div>
</div>

<a href="#siteModal" class="card-link mb-1  txt btn btn-outline-dark" data-toggle="modal" data-target="">SAIBA MAIS</a>