如何在HTML5网页上创建一个类似窗口的控件？

Question

我正在制作如图所示的控件。它有一个标题栏和一组控件。构建它的最佳方式是什么？它是HTML5网页的一部分。

http://tinypic.com/r/25rpk4o/6

一种方法是用画布矩形绘制标题栏，然后将所有控件放在它下面。折叠可以使用javascript完成。但肯定有更好的办法。

我想到的另一种方法是制作一个表格，将第一行作为标题栏，并在第二行添加子控件。它似乎工作得很好，但VS2012一直告诉我，我不能在tr中嵌套按钮。

Answer 1

这个问题或类似的问题在stackoverflow上被问到了……

What are my alternatives to modal or modeless dialogs to display information and contact forms?

也许这篇文章的最后一个帖子可以给你一些例子？

到外部示例的直接链接是

http://websemantics.co.uk/resources/accessible_css3_modal_pop-ups/

Answer 2

好的，对不起，我误解了你最初的意思。

你可以看看下面两个文件，一个是网页，另一个是用户控件，用户控件将代码复制并粘贴到两个新文件中，看看你是怎么想的？

我试图从你上传的原始图片中重新创建控件，并使用了TABLE标记，尽管你可能可以使用DIVS来减少html代码。

文件1

<%@ Page Language="VB" %>
<%@ Register src="MyInlineWindow.ascx" tagname="MyInlineWindow" tagprefix="uc1" %>
<!-- HTML5 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/vbscript">
    Sub ShowInlineWindow()
    dim el
      set el = window.document.getElementById("MyInlineWindowCtrl")
      window.document.getElementById("Result").innerhtml = "Nothing"
      el.style.display = "block"
    End Sub

    Sub HideInlineWindow(YesNo)
    dim el
      set el = window.document.getElementById("MyInlineWindowCtrl")
      window.document.getElementById("Result").innerhtml = YesNo
      el.style.display = "none"
    End Sub
  </script>
</head>
<body>
<form id="form1" runat="server">
  <div>
    <input id="Button1" type="button" value="Interact" onclick="ShowInlineWindow()" /><br />[<label id="Result">Nothing</label>]
    <br /><br /><br /><br />
    <uc1:MyInlineWindow ID="MyInlineWindow1" runat="server" />
  </div>
</form>
</body>
</html>

文件2

<%@ Control Language="VB" ClassName="MyInlineWindow" %>
<table id="MyInlineWindowCtrl" style="display: none; border: 1px solid #333333; width: 640px;">
<tr>
    <td colspan="4" style="border-bottom-style: solid; border-bottom-width: 1px; background-color: #808080; color: #FFFFFF;">Window Title</td>
</tr><tr>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td>Label</td>
            </tr><tr>
                <td>
                    <select id="Select1" name="D1">
                        <option>Some drop down</option>
                    </select>
                </td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>Label</td>
            </tr><tr>
                <td>
                    <select id="Select2" name="D2">
                        <option>Some drop down</option>
                    </select>
                </td>
            </tr>
        </table>
    </td>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td>Label</td>
            </tr><tr>
                <td><input id="Radio1" checked="true" name="R1" type="radio" value="V1" /> Label</td>
            </tr><tr>
                <td><input id="Radio2" checked="true" name="R2" type="radio" value="V1" /> Label</td>
            </tr><tr>
                <td><input id="Radio3" checked="true" name="R3" type="radio" value="V1" /> Label</td>
            </tr><tr>
            <td><input id="Radio4" checked="true" name="R4" type="radio" value="V1" /> Label</td>
            </tr>
        </table>
    </td>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td colspan="2">Label</td>
            </tr><tr>
                <td>From</td>
                <td>To</td>
            </tr><tr>
                <td>
                    <select id="Select3" name="D3">
                        <option>Date Picker</option>
                    </select>
                </td>
                <td>
                    <select id="Select4" name="D4">
                        <option>Date Picker</option>
                    </select>
                </td>
            </tr><tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr><tr>
                <td><input id="Radio5" checked="true" name="R5" type="radio" value="V1" /> Label</td>
                <td><input id="Radio6" checked="true" name="R6" type="radio" value="V1" /> Label</td>
            </tr>
        </table>
    </td>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td style="text-align: center">
                    <input id="Button1" type="button" value="Cancel" onclick="HideInlineWindow('Cancel')" />
                    <input id="Button2" type="button" value="Okay" onclick="HideInlineWindow('Okay')" />
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

也许它更接近你想要的。我也使用了VB脚本，因为这是我最了解的，但它应该不会太难移植/转置到Javascript中。