1

我正在使用 jQuery mobile 1.3 并且在弹出对话框的样式方面遇到了一些问题。对话框如下所示：

在此处输入图像描述

html代码如下所示：

<div data-role="popup" id="AddingDialog" data-overlay-theme="a" data-theme="c" style="max-width:500px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Modify Item</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Adding new item</h3>
            <div data-role="fieldcontain"  >
            <input type="text" name="name" id="addItemInput" placeholder="label of new item" maxlength="100" value=""  />
        </div>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back"
            data-theme="b" data-transition="flow" id="doAddItem">Yes</a>
    </div>
</div>

我希望对话框更宽，输入字段扩展到对话框的整个宽度，并且按钮正确对齐。

使用 Firefox 开发者工具（Examiner）探索我发现某处定义了 78% 的宽度。但我不知道如何消除这个限制。当单击输入字段时出现这个蓝色阴影并且在取消选择时仍然存在，我也不是很兴奋。

我不是使用 jQuery mobile 进行 CSS 编程的专家。

4

1 回答 1

2

更新

为了移除文本框阴影，您需要覆盖 JQM CSS ui-focus。

在 JQM 样式表之后添加以下样式以覆盖它。

.ui-input-text.ui-focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

这是弹出窗口的最终外观。

Jquery mobile 有一个内置的网格系统，便于定位和对齐页面的内容。这是 JQM 文档的链接：http: //jquerymobile.com/demos/1.2.0/docs/content/content-grids.html

于 2013-03-13T23:26:25.723 回答