CODEWITHSUNDEEP
javascriptbootstrap-4bootstrap-modal
Manisha
Manisha

Reputation: 57

Bootstrap popup model not working on my webpage

The bootstrap popup is not showing up on my website. I have copied the popup code from the official Bootstrap website. Here is the link to my website Link to webiste

The popup button is located before the footer credits.enter image description here

Upvotes: 0

Views: 1095

Answers (2)

saAction
saAction

Reputation: 2065

Current condition :

Solution:

  • You have footer, <footer class="footer-social-icon text-center section_padding_70 clearfix">
  • Some how there is z-index:-101; and position:fixed; in <footer>
  • You need to remove model outside from <footer> and apply directly before </body> tag ends.

<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

I hope it will start working normally.

Old Code from website is :

Upvotes: 1

IT Man
IT Man

Reputation: 1036

The reason is that modal content is placed (nested) inside footer element. Move that modal div to body and modal will appear.

Upvotes: 0

Related Questions