Bootstrap Modal doesn't show

前端 未结 6 1459
不知归路
不知归路 2021-01-18 02:02

I wanted to test out Bootstrap\'s modal element and created a little test page. But nothing shows up and I\'m wondering why, any clues? I got the source from the bootstrap p

相关标签:
6条回答
  • 2021-01-18 02:15

    you should load your jQuery javascript files, before bootstrap javascript files!
    hope it work

    0 讨论(0)
  • 2021-01-18 02:16

    Your example doesn't have jQuery included.

    Uncaught Error: Bootstrap requires jQuery 
    

    You must include jQuery before including Bootstrap.

    Also, Bootstrap Modal's need to either be toggled by some kind of control on the page, or by JavaScript: http://getbootstrap.com/javascript/#modals-usage

    This means you either need a button with the appropriate data attributes, which would correspond to attributes set on your modal, or execute via javascript

    via JavaScript:

    $('.modal').modal('show')

    Or via attributes on a control:

    <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

    EDIT: If you do this, you need to specify the target as the ID of the modal div

    <div id="myModal" class="modal fade">
       <!--modal content here -->
    </div><!-- /.modal -->
    
    0 讨论(0)
  • 2021-01-18 02:24

    In my case the bootstrap model was not showing up when i did this

    $('#myModal').show();
    

    But i modified above piece of code to the one below, then it worked

    $('#myModal').modal('show');
    
    0 讨论(0)
  • 2021-01-18 02:33

    You need to include jQuery before Bootstrap.

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    0 讨论(0)
  • 2021-01-18 02:34

    first thing you need to include jquery, and also trigger the modal, either with a button -

    <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
    

    or show the bootstrap modal using jquery -

    <script type="text/javascript">
    $(document).ready(function(){
        $('.modal').modal('show');
    });
    </script>
    
    0 讨论(0)
  • 2021-01-18 02:34

    I don't know if this helpfull or not. I've tried for several hours a lot of these tips. At last I added bg-dark to the modals class and it works.

    so I changed

    <div id="myModal" class="modal fade" role="dialog">
    

    into:

    <div id="myModal" class="modal fade bg-dark" role="dialog">
    
    0 讨论(0)
提交回复
热议问题