带有表格的HTML / Javascript弹出框 [英] HTML/Javascript popup box with table

问题描述

在我的应用程序中，我有一个按钮，当用户单击按钮时，我想要一个弹出框（不是窗口）出现，并在表中填入我传入的信息。

我一直在网上寻找，似乎无法找到如何做到这一点，甚至从哪里开始（使用所有的HTML，使用所有的Javascript，同时使用HTML和Javascript） 。有没有人做过类似的事情，或知道一个好的起点（例如使用什么组件）？

范围的框架，将为你做的伎俩。

一个简单和常见的是jQuery对话框（ http://jqueryui.com/dialog/ ）

一个小例子，给出了html：

 < div id =dialog-modaltitle =Basic modal dialogstyle =display：none> 
 
添加模式叠加屏幕使对话框更加突出，因为它可以淡化页面内容。< / p> 
< / div> 
 
< a href =＃id =openDialog>点击我< / a> 
  

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

 < script> （）
 $（function（）{
 $（#openDialog）。on（click，function（）{
 $（＃dialog-modal）.dialog（{ 
 $（＃dialog-modal）.show（）; 
}）; 
 }）; 
< / script> 
  

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.

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.

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

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> 

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>

这篇关于带有表格的HTML / Javascript弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！