我正在關注這個問題的答案：Jinja2 模板中的模態視窗。燒瓶
我在 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">×</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>
該按鈕出現，但當我單擊它時沒有任何反應。我不知道我是應該做data-target匹配id還是我需要做其他事情。
或者，這只是一個中間步驟，因此我可以了解它應該如何作業的基礎知識。我最終想要做的是將其分開，以便單擊按鈕允許我在 python 中加載藍圖以彈出模式視窗。
我想要的是有類似的東西：
在 page.html 中：
<!-- not sure what that something would be -->
<button something="{{ url_for('sandbox/some_path') }}">Test Modal</button>
在 sandbox.py 中：
@bp.route('/some_path')
def dosomethingwithmodal():
data = None
return render_template('generate_modal.html', data=data)
最后在 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">×</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>
我需要做些什么來改變這種模式以使其發揮作用？
uj5u.com熱心網友回復：
您的問題在于您的按鈕導致 page.html 中的模式。你有：
<button ... data-target="placeholder-id">Test Modal</button>
但它應該是：
<button ... data-target="#placeholder-id">Test Modal</button>
#需要正確指向模態。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/445087.html