Question

我是一个新手，我不知道如何做到这一点。

我想要的是什么：

当我在页面的表单上单击“提交”时，它将转到servlet并将数据加载到数据库中。然后作为负载的确认，它显示成功模态。我想实现servlet不重定向的东西。也就是说，它会停留在同一页面上并显示弹出的“数据成功”模式。

我正在使用response.sendRedirect重定向到我的servlet中的另一个页面但我不想重定向，我想留在同一页面，弹出窗口页面。

Answer 1

使用jquery-ui可以很容易地实现这一点。

您可以通过两种方式添加jquery-ui：

1）将此链接放在<head>标记

中

<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）下载文件并将其添加到您的网站（与上述相同，但文件将在您的域中）。 <强>推荐

您在<body>标记内的任何位置创建一个空div：

<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>

然后，您可以在servlet的任何位置调用pop_up_modal()。

Answer 2

使用Bootstrap模态

基本上你可以使用带data-toggle="modal" data-target="#myModal"的按钮或直接通过JS调用：

$('#myModal').modal('show');

Test it here.

在同一页面上提交表单后弹出模态

2 个答案: