在同一页面上提交表单后弹出模态 [英] Modal pop up after submitting form on the same page
问题描述
我是一个新手，我不知道如何做到这一点。
I am a total novice and i don't know how to make this.
我想要的是什么：
当我在页面的表单上单击提交时，它将转到servlet并将数据加载到数据库中。然后作为负载的确认，它显示成功模态。
我想实现servlet不重定向的东西。也就是说，它会停留在同一页面上并显示弹出的数据成功模式。
When I click submit on my page's form, it will go to the servlet and load the data in the database. Then as a confirmation of load, it show a success modal. I want to achieve something in which the servlet does not redirect. That is, it stays on the same page and show a "Data lodaded successfully" modal that pops up.
我正在使用 response.sendRedirect 重定向到我的servlet
中的另一个页面，但我不想重定向，我想留在同一个页面中，弹出窗口显示在表单页面中。
I am using response.sendRedirect to redirect to another page in my servlet
but I don't want to redirect, I want to stay in the same page with a pop up appearing in the form page.
推荐答案
您可以使用jquery-ui轻松实现这一目标。
You can achieve that very easily by using jquery-ui.
您可以添加jquery-ui有两种方式：
You can add jquery-ui in 2 ways:
1）将此链接放在< head> 标签内
1) Put this links inside your <head> tags
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
OR
2）下载文件并将它们添加到您的网站（与上面相同，但文件将在您的域上）。 推荐
2) Download the files and add them to your website (same as above but files will be on your domain). Recommended
您在内部任何位置创建一个空div < body> 标记：
You create an empty div anywhere inside you <body> tags:
<div id="modal_popup">
</div>
然后添加以下代码。
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$( "#modal_popup" ).dialog({
autoOpen: false,
height: 140,
modal: true,
title: "The title of your modal popup",
open: function(){
$( "#modal_popup" ).append("The text that you want in the modal.");
}
});
});
$( "#submit_id" ).click(function(){ $( "#modal_popup" ).dialog('open'); });
});
</script>
编辑
<script type="text/javascript">
function pop_up_modal() {
$( "#modal_popup" ).dialog({
height: 140,
modal: true,
title: "The title of your modal popup",
open: function(){
$( "#modal_popup" ).append("The text that you want in the modal.");
}
});
};
</script>
然后你可以随时随地拨打 pop_up_modal（）在您的servlet上。
You can then call pop_up_modal() anywhere on your servlet.
这篇关于在同一页面上提交表单后弹出模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
