Java 如何在模态弹出窗口中显示 JSP 页面?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42217829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-12 00:01:07  来源:igfitidea点击:

How to show JSP page in Modal Popup window?

javascriptjavajqueryhtmljsp

提问by Adeel

I am pretty much new to Jsp stuff. What I am trying to achieve is to show contents of another jsp page lets say help.jsp in service.jsp page but only when user click ? image (? image represents help). I want to show the contents of help.jsp in a popup window and also at the same time want the main screen to fade out or non intractable.

我对 Jsp 的东西很陌生。我想要实现的是在 service.jsp 页面中显示另一个 jsp 页面的内容让我们说 help.jsp 但仅当用户单击时?图像(?图像代表帮助)。我想在弹出窗口中显示 help.jsp 的内容,同时还希望主屏幕淡出或非棘手。

Here is what I am doing so far. I have created a div in service.jsp

这是我目前正在做的事情。我在 service.jsp 中创建了一个 div

<div id="dialog" title="Basic dialog">

</div>

and created a javascript function

并创建了一个 javascript 函数

function openDialog() {
        $("#dialog").load('/myaccount/registration/help.jsp').dialog({modal: true});
    }

My anchor tag looks like this

我的锚标签看起来像这样

 <a tabindex="1005" href="#"  onclick="openDialog();" onMouseOver="window.status='Launch Help Window'; return true" onMouseOut ="window.status='';return true"><span class="WhiteBody"><img src="images/icon_help.gif" border="0"></span></a>

When I click help button it redirect to a blank page.

当我单击帮助按钮时,它会重定向到一个空白页面。

Please help me !

请帮我 !

回答by Vinoth Krishnan

In your HTML,

在您的 HTML 中,

<button id="myButton">click!</button>

<div id="dialog" title="Dialog box">
  My content // Have to add your jsp page here
</div>

And in your Script,

在你的脚本中,

$(function() {

  $("#dialog").dialog({
     autoOpen: false,
     modal: true
   });

  $("#myButton").on("click", function(e) {
      e.preventDefault();
      $("#dialog").dialog("open");
  });

});

See the Fiddlefor working sample.

有关工作示例,请参阅Fiddle