Question

我在jQuery UI对话框中遇到了这个问题，按钮没有按照我想要的方式显示。我一直在jQuery UI网站上的模态表单demo之后执行此对话框。所以，这是对话框aspx：

<div id="dialog-form" title="Admitir paciente">
    <p class="validateTips">
        Todos los campos son requeridos.
    </p>
    <fieldset>
        <asp:Label runat="server" ID="lblName" AssociatedControlID="txbAdmitName">Nombre:</asp:Label>
        <asp:TextBox ID="txbAdmitName" runat="server" Width="150px" CssClass="txtNoWidth"
            ToolTip="Especifique el nombre del paciente"></asp:TextBox>
        <act:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server" FilterMode="ValidChars"
            FilterType="UppercaseLetters, LowercaseLetters, Custom" ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ."
            TargetControlID="txbAdmitName">
        </act:FilteredTextBoxExtender>
        <asp:Label runat="server" ID="lblSurname" AssociatedControlID="txbAdmitSurname">Apellidos:</asp:Label>
        <asp:TextBox ID="txbAdmitSurname" runat="server" Width="150px" CssClass="txtNoWidth"
            ToolTip="Especifique el nombre del paciente"></asp:TextBox>
        <act:FilteredTextBoxExtender ID="FilteredTextBoxExtender5" runat="server" FilterMode="ValidChars"
            FilterType="UppercaseLetters, LowercaseLetters, Custom" ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ."
            TargetControlID="txbAdmitSurname">
        </act:FilteredTextBoxExtender>
        <asp:Label runat="server" ID="lblId" AssociatedControlID="txbAdmitId">Cédula:</asp:Label>
        <asp:TextBox ID="txbAdmitId" runat="server" Width="150px" CssClass="txtNoWidth" ToolTip="Especifique la cédula del paciente"
            ></asp:TextBox>
        <act:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" FilterMode="ValidChars"
            FilterType="UppercaseLetters, LowercaseLetters, Custom, Numbers" ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü . -"
            TargetControlID="txbAdmitId">
        </act:FilteredTextBoxExtender>
        <asp:Label runat="server" ID="lblBirthDate" AssociatedControlID="txtDateOfBirth">Fecha de nacimiento:</asp:Label>
        <table id="table-date" style="border-collapse: collapse;">
            <tr>
                <td style="padding: 0;">
                    <asp:TextBox ID="txtDateOfBirth" runat="server" CssClass="txtNoWidth" TabIndex="5"
                        ToolTip="Especifique o seleccione la fecha de nacimiento" Width="134px"></asp:TextBox>
                    <act:MaskedEditExtender ID="MaskedEditExtender1" runat="server" Mask="99/99/9999"
                        MaskType="Date" TargetControlID="txtDateOfBirth" UserDateFormat="DayMonthYear">
                    </act:MaskedEditExtender>
                </td>
                <td style="padding: 0; text-align: left;">
                    <asp:ImageButton ID="imgCalendarPopupButton" runat="server" CausesValidation="False"
                        Height="16px" TabIndex="6" Width="16px" ImageUrl="~/App_Themes/RISNewTheme/Images/Content/calendar.gif" />
                    <act:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy" PopupButtonID="imgCalendarPopupButton"
                        TargetControlID="txtDateOfBirth">
                    </act:CalendarExtender>
                </td>
            </tr>
        </table>
        <asp:Label runat="server" ID="lblAge" AssociatedControlID="txbAdmitAge">Edad:</asp:Label>
        <asp:TextBox runat="server" ID="txbAdmitAge" Width="150px" CssClass="txtNoWidth"
            ToolTip="Especifique la edad del paciente"></asp:TextBox>
        <asp:RangeValidator ID="RangeValidator2" runat="server" ControlToValidate="txbAdmitAge"
            ToolTip="Indique una edad entre 0 y 120 años" Style="cursor: default;" Font-Size="X-Small"
            Type="Integer" MaximumValue="120" MinimumValue="0" SetFocusOnError="True" ValidationGroup="Admision">*</asp:RangeValidator>
        <act:FilteredTextBoxExtender ID="FilteredTextBoxExtender6" runat="server" FilterMode="ValidChars"
            FilterType="Numbers, Custom" TargetControlID="txbAdmitAge" ValidChars="-">
        </act:FilteredTextBoxExtender>
        <asp:Label runat="server" ID="lblAdmitSex" AssociatedControlID="ddlSex">Sexo:</asp:Label>
        <div class="ui-widget">
            <asp:DropDownList runat="server" ID="ddlSex" CssClass="ddlStandardWidth" Width="150px"
                DataSourceID="odsSex" DataTextField="Valor" DataValueField="Id" OnDataBound="ddlSex_OnDataBound" />
            <asp:ObjectDataSource ID="odsSex" runat="server" OnSelecting="odsSex_OnSelecting"
                SelectMethod="GetNomenclatorsValues" TypeName="CassandraRIS.BusinessLogic.Managers.GestorNomencladores">
                <SelectParameters>
                    <asp:Parameter Name="tipo" Type="Object" />
                </SelectParameters>
            </asp:ObjectDataSource>
        </div>
    </fieldset>
</div>

这是js代码，我没有进入按钮的操作，因为我先去测试，看看对话框是如何显示的，我发现了这个问题。

$(function () {
        $("#dialog-form").dialog({
            autoOpen: false,
            height: 310,
            width: 199,
            modal: true,
            resizable: false,
            buttons: {
                'Admitir': function () {
                    $(this).dialog("close");
                },
                'Cancelar': function () {
                    $(this).dialog("close");
                }
            },
            close: function () {

            }
        });

        $('#<%=lnbAdmitPatient.ClientID %>')
            .click(function () {
                $("#dialog-form").dialog("open");
                return false;
            });
    });

当对话框打开时，它会显示如下：

Dialog

我对话框右侧浮动的绿线是按钮，实际上是超大按钮。我在Firefox和Firefox上的开发人员工具上使用了firebug并试图找到一个可能正在查看样式的解决方案，但没有出现任何问题。我在Firebug中发现有趣的是按钮应该出现的位置看起来不可见或禁用，事实上，div ui-dialog-buttonset大小为0x0。

Firebug of where buttons should be placed

任何可能的帮助，想法，小费或在哪里看都会受到高度赞赏。感谢

Answer 1

增加宽度会有帮助吗？

显示对话框外的jQuery UI对话框按钮

1 个答案: