Question

我正在使用Jquery移动弹出窗口并希望在弹出窗口中显示表单。我想在同一行显示文本标签和文本框。所以，我使用div与fieldcontain围绕它。它在popup之外工作但不在内部。

<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/

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

Answer 1

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

Answer 2

看起来像Field Containers受到Popups使用的样式的阻碍。我尝试了他们的Form示例：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”（in   上面的例子，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>

JQM弹出窗口 - fieldcontain在弹出窗口内不起作用

2 个答案: