Can't link button to modal window

Question

I am following along with the answer to this question: Modal window in Jinja2 template. Flask

I've made the following snippet in page.html:

<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="placeholder-id">Test Modal</button>


<!-- Modal -->
<div class="modal fade" id="placeholder-id" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Modal Stuff</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

The button shows up, but nothing happens when I click it. I can't tell if I'm just supposed to make data-target match id or if I need to do something else.

Alternately, this is just an intermediate step so I can understand the basics of how it's supposed to work. What I ultimately want to do is separate this out, so that clicking the button allows me to load a blueprint in python to make a modal window pop up.

What I would like is to have something like:

in page.html:

<!-- not sure what that something would be -->
<button something="{{ url_for('sandbox/some_path') }}">Test Modal</button>

in sandbox.py:

@bp.route('/some_path')                                                                                               
def dosomethingwithmodal():                                                                                           
    data = None                                                                                                       
    return render_template('generate_modal.html', data=data) 

and finally in generate_modal.html:

<!-- Modal -->
<div class="modal fade" id="placeholder-id" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Modal Stuff</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

What do I need to do to alter this pattern to make it work?

Answer 1

Your problem is in your button that leads to the modal in page.html. You have:

<button ... data-target="placeholder-id">Test Modal</button>

But it should be:

<button ... data-target="#placeholder-id">Test Modal</button>

The # is needed to correctly point to the modal.