3

我正在使用 Jquery 移动弹出窗口并希望在弹出窗口中显示一个表单。我想在同一行显示文本标签和文本框。所以，我使用 div 和 fieldcontain 。它在弹出窗口之外有效，但在内部无效。

<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
    <div data-role="fieldcontain">
        <label for="input"> Fieldname </label>
        <input type="text" id="input" value="" />
    </div>
</div>

<div data-role="fieldcontain">
    <label for="input"> Fieldname   </label>                                                
    <input type="text" id="input" value="" />
</div>

看到这个jsfiddle：http: //jsfiddle.net/B3pyG/

我想知道这是否是弹出窗口的限制。

4

2 回答 2

1

虽然问题是 3 年前的问题，但只是一个建议，也许您可​​以在弹出窗口中使用表格？

于 2016-04-06T05:49:44.197 回答
0

看起来字段容器受到用于弹出窗口的样式的阻碍。我尝试了他们的表单示例：http: //jsfiddle.net/Twisty/BrsR2/

HTML

<div data-role="page">
    <div data-role="header">
        <h1>Test PopUp</h1>
    </div>
    <div data-role="content">
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
        <div data-role="popup" id="popupBasic">
            <form>
                <div style="padding:10px 20px; width: 440px">
                    <h3>Please sign in</h3>
                    <div data-role="fieldcontain">
                        <label for="un">Username:</label>
                        <input placeholder="username" id="un" value="" name="user">
                        <label for="pw">Password:</label>
    <input id="pw" type="password" placeholder="password" value="" name="pass">
                    </div>
                    <div data-shadow="true" data-iconshadow="true" data-icon="" data-iconpos="" data-theme="b" aria-disabled="false">
                    </div>
                </div>
            </form>
        </div>
        <div data-role="fieldcontain">
             <label for="input"> Fieldname </label>
             <input type="text" id="input" value="" />
        </div>
    </div>
</div>

Popup 包装器似乎将所有内容都拉入并尽可能多地包装。他们在文档中谈论它：

弹出窗口由两个元素组成：屏幕，它是覆盖整个文档的透明或半透明元素，以及容器，它是弹出窗口本身。如果你的原始元素有一个 id 属性，那么屏幕和容器都会收到一个基于它的 id 属性。屏幕的 id 后缀为“-screen”，容器的 id 后缀为“-popup”（上例中分别为 id="popupBasic-screen" 和 id="popupBasic-popup"）。

该框架为文本元素添加了少量边距，但它实际上只是一个带有圆角和阴影的容器，可作为您设计的空白板（即使这些功能也可以通过options禁用）。

您可以通过为标签制作一个框并将输入向右浮动来解决此问题。就像是：

<span display="width: 100%; display: block;">
    <span style="display: inline-block; width: 100px;">Label: </span>
    <input type="text" name="test" style="width: 340px; float: right;">
</span>
于 2013-01-02T23:49:50.923 回答