0

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

Manisha
  • 57
  • 1
  • 9
  • The provided url is not working. Are you loading the required bootstrap JavaScript ? – Nir Aug 30 '18 at 06:34
  • Ohh. Sorry about that, I have corrected the URL. – Manisha Aug 30 '18 at 06:36
  • your modal is getting displayed but it is appearing behind the `backdrop` of the modal as you have placed the model inside an parent element (`footer`) which is having the position as `fixed` which is causing the issue of modal being displayed behind the `backdrop` for more info [Bootstrap modal appearing under background](https://stackoverflow.com/a/11788713/2417602) and please share the relevant code here instead of an image so, people can help. – vikscool Aug 30 '18 at 07:03

2 Answers2

1

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 :

saAction
  • 2,035
  • 1
  • 13
  • 18
  • Thats not copy paste. Element nesting is different thus it will work. – IT Man Aug 30 '18 at 07:02
  • @ITMan, I have applied screen shot from given website, and its 100% copy from original code, which is working in above! And I also told to move it outside from `
    `
     – saAction Aug 30 '18 at 07:17
  • i mean that this is partial copy -> you have copied modal content but not exact (or meaningful) html structure. Anyway that is not important any more :) – IT Man Aug 30 '18 at 18:47
0

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

IT Man
  • 933
  • 3
  • 12
  • 33