带有表格的 HTML/Javascript 弹出框

2022-01-20 00:00:00 popup javascript html

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

In my application I have a button, when the user clicks on the button I want a popup box (not window) to appear with a table populated with information I pass in to it.

我一直在网上寻找，但似乎找不到如何做到这一点，甚至找不到从哪里开始(使用所有 HTML，使用所有 Javascript，同时使用 HTML 和 Javascript).有没有人做过类似的事情或知道一个好的起点(例如要使用哪些组件)?

I have been looking online and cant seem to find how to do this, or even where to start (use all HTML, use all Javascript, use both HTML and Javascript). Has anyone done something similar to this or know a good starting point for this (e.g. what components to use)?

推荐答案

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

There's a range of frameworks that'll do the trick for you.

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

An easy and common one is jQuery Dialog (http://jqueryui.com/dialog/)

一个小例子，给定html:

A small example, given the 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:

Assuming you've included jQuery and jQuery dialog on top, add the following javascript:

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

相关文章