我要显示新表格,该表格将允许用户添加意见。我不确定我应该以哪种方式将jquery脚本添加到我的项目中。我尝试在简单的html网站上运行它,但是它不能与flask应用程序相同。这是我的代码:
% extends "bootstrap/base.html" %}
{% block content %}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#btnclick").click(function () {
$("#divpopup").dialog({
title:"Dodaj opinie",
width: 430,
height: 200,
modal:true,
buttons: {
Close:
function(){
$(this).dialog('close');
}
}
});
});
})
<div id="divpopup" style="display: none">
Here will be form
</div>
<button type="button" id="btnclick">Add opinion</button>
{% endblock %}
在单击按钮后,没有任何反应。我使用bootstrap和jinja2,是否应该使用其他内容来添加脚本?
答案 0 :(得分:0)
您可能会说要在项目中使用Bootstrap,因此可以考虑使用Bootstrap Modal。
这是从他们的网站复制的一个非常简单的示例:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
INSERT FORM HERE
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
如果您使用的是Bootstrap 4,则应该可以复制该权限并更改IDs
以匹配您想要的内容。
链接到文档:https://getbootstrap.com/docs/4.0/components/modal/