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" data-toggle="modal" data-target="placeholder-id">Test Modal</button>
<!-- Modal -->
<div id="placeholder-id" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal">×</button>
<h4 >Modal Title</h4>
</div>
<div >
<p>Modal Stuff</p>
</div>
<div >
<button type="button" 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 id="placeholder-id" role="dialog">
<div >
<!-- Modal content-->
<div >
<div >
<button type="button" data-dismiss="modal">×</button>
<h4 >Modal Title</h4>
</div>
<div >
<p>Modal Stuff</p>
</div>
<div >
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
What do I need to do to alter this pattern to make it work?
CodePudding user response:
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.