带有表格的HTML/Javascript弹出框

Question

带有表格的HTML/Javascript弹出框

javascripthtmlpopup

3

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

我已经在网上搜索了很久，似乎找不到如何做到这一点，甚至不知道从哪里开始（使用全部HTML、使用全部Javascript、同时使用HTML和Javascript）。有人做过类似的事情吗？或者知道一个好的起点是什么（例如使用哪些组件）？

- newSpringer

只需使用JavaScript动态创建HTML元素，通过函数传递信息，并确保新元素在CSS中具有更高的z-index。 - Xdevelop

你可以使用jQuery对话框。 - Suresh Ponnukalai

你的表在哪里？ - Rohit Batham

请查看此链接：http://jqueryui.com/dialog/ - Rohit Batham

在jsfiddle上查看我的答案和演示 :) - Mohammad Masoudian

显示剩余2条评论

4个回答

2

只需使用JQuery

在此查看演示

HTML：

<!DOCTYPE html>
<html lang="fa">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript">
    $(document).ready(function() {
        $("#help_button").click(function() {
            $("#help").slideToggle(1000, function() {
                if($("#help_button").val() == "close")
                {
                    $("#help_button").val("show table");
                }
                else
                {
                    $("#help_button").val("close");
                }
            });
        });
    });
    </script>
</head>

<body>

<div id="help">table populated with information </div>
<input id="help_button" type="button" value="Show Popup"/>

</body>
</html>

CSS :

#help{
    display:none;
}

- Mohammad Masoudian

1

这个代码可以运行，但它会把页面上的所有内容都往下推，而不是真正地给我一个弹出框来显示信息。 - newSpringer

这是一个非弹出窗口。 - torina

0

您可以像这样创建一个弹出窗口.. plunker链接并将表格值传递到其中。

- Pranav

-1

另一种方法是使用Bootstrap 3和这个插件(插件示例)(在那里你可以找到一堆类似的插件，看看并选择一个)。

基于某个框架（bootstrap）构建您的网站是一个不错的方式 :)

- qwetty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harald F. · Accepted Answer

有许多框架可以为您完成此操作。

一种简单而常见的是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 dialog，那么请添加以下javascript代码：

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