I'm trying to open a modal using a fragment

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> <script src="/static/bootstrap/js/bootstrap-modal.js"></script> <script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script> <div class="modal hide" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

copied from the documentation. Clicking on the button takes you to the link #myModal, unlike the documentation, where the modular window appears. Why? Thank you in advance.

  • one
    ... well, for the same novice rams, as I add: jQuery connection should occur before the Bootstrap plugin ... - wowkalucky

2 answers 2

I didn’t work with Bootstrap, but the superficial "patient inspection" showed that for the modal windows to work, you need to connect the bootstrap-modal.js plugin and styles. Styles disassemble, frankly, bummer. Therefore, see for yourself what classes and id-schniki are needed to work from the style file on the demo page, and delete the rest. As a result, without even really cracking the codes, we get the result we need .

    1. You forgot to connect jQuery (its need is written in the documentation for the bootstrap components)

    2. You forgot to initialize the window and bind the event.

       $('[data-toggle=model]').modal()
    • 3
      the second paragraph is not necessary if data-api respected: data-toggle = 'modal' data-target = 'modalId' - Specter