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

Navigation
1

So guys, I created a modal like this: 

<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 one-page style layout, because it is using the id="#" that is equal to the href of the link that will call the modal. How do I make the modal appear? Any suggestion? Because when I click the button it plays to the beginning of the site, obeying the id="#"

    
asked by anonymous 03.06.2018 / 05:44

2 answers

2

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

Removing will not have problems. Here is 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 for some reason you want to keep # in the modal id. Just 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>
    
03.06.2018 / 06:15
0

You can also open the modal

  • by setting the value of the href attribute of the tag a to the value #siteModal
  • Removing the game from the old (cerch or octothorpe) # of the 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><scriptsrc="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>
        
    03.06.2018 / 16:12
    Find substring with REGEX How to make a login screen and password using JSF