Question

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

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

Answer 1

只需使用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;
}

Answer 2

有一系列框架可以帮助你。

简单而常见的是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>

Answer 3

另一种方法是使用Bootstrap 3 plugin（plugin-examples）（在那里你可以找到一堆类似的插件，看看并选择一个）

这是基于某个框架（bootstrap）构建您的网站的好方法:)

Answer 4

你可以像这样创建一个弹出窗口。plunker link 并传递其中的表值。

带表的HTML / Javascript弹出框

4 个答案: