javascript - 带表格的 HTML/Javascript 弹出框

Question

在我的应用程序中，我有一个按钮，当用户单击该按钮时，我希望出现一个弹出框(不是窗口)，其中包含一个表格，其中填充了我传递给它的信息。

我一直在网上查找，似乎找不到如何执行此操作，甚至找不到从哪里开始(使用所有 HTML、使用所有 Javascript、同时使用 HTML 和 Javascript)。有没有人做过类似的事情或知道一个好的起点(例如要使用什么组件)？

Answer 1

有一系列框架可以为您解决问题。

一个简单而常见的是 jQuery Dialog ( http://jqueryui.com/dialog/ )

一个小例子，给定 html:

<div id="dialog-modal" title="Basic modal dialog" style="display:none">
  <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<a href="#" id="openDialog">Click me</a> 

假设您在顶部包含了 jQuery 和 jQuery 对话框，请添加以下 javascript:

<script>
$(function() {
   $( "#openDialog").on("click", function(){ 
       $( "#dialog-modal" ).dialog({
          height: 140,
          modal: true
        });
       $( "#dialog-modal" ).show();
    });
 });
</script>