Question

我检查的所有回复似乎都没有解决我面临的问题。我有一个模态对话框，打开以响应按钮单击。我做一些客户端和一些服务器端验证。客户端可以正常但是当我进行服务器端验证并重新显示模态时，每次失败的验证（并重新显示模态）背景会变暗。

我尝试了几个CSS和js解决方案建议但没有帮助。有一个解决方案最初似乎有所帮助（有点）但是当使用“取消”按钮取消对话框时，页面上的所有按钮都不再可以点击。

这就是我所拥有的：

<div class="modal fade" id="addEditModal" role="dialog" aria-labelledby="catModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in">
        <div class="modal-content">    
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><span id="spnAddEditHeader"></h4>
            </div>
            <div class="modal-body">
                <div class="row">  
                    <div class="col-sm-4 col-md-4">
                        <div class="eaTool input-group">
                            <label for="tbName">Tool Name</label>
                            <asp:TextBox runat="server" ID="tbName" CssClass="form-control" ClientIDMode="Static" />
                            <span runat="server" id="lblErrToolName" clientidmode="static" class="field-validation-error pull-left" style="display:none"></span>
                        </div>
                    </div>
                    <div class="col-sm-4 col-md-4" style="vertical-align:bottom;padding-top:20px">
                        <div id="divNewButtons" style="text-align: center;">
                            <button id="btnNewToolCancel" class="btn btn-info2" data-dismiss="modal" aria-hidden="true" aria-label="Cancel" >Cancel</button>&nbsp;&nbsp;&nbsp;&nbsp;
                             <button id="btnNewToolSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Submit" >Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" runat="server" id="btnNewTool" onclick="showNew();">Add New Tool</button>

function showNew() {
    clear();
    $("#spnAddEditHeader").text("Add New Tool");

    $('#addEditModal').modal({ backdrop: 'static', keyboard: false });
    $('#addEditModal').modal('show');
}

$(document).on("click", "#btnNewToolSubmit", function (event) {
    var isValid = validateSubmit();

    if (isValid) {
        __doPostBack('btnNewToolSubmit', "submitNew");
        $('#addEditModal').modal('hide');
    }
    else
        return false;
});

<。>在.cs文件中：

protected void AddTool()
{
    string sToolName = tbName.Text.Trim();
    bool bNameExists = ToolsData.ToolNameExists(sToolName);

    if (bNameExists)
    {
        lblErrToolName.InnerText = "A tool by same name alreay exists.";
        lblErrToolName.Style["display"] = "inline";          

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "showNewModal", "$('#addEditModal').modal('show');", true);
    }
    else
    {
        ....
    }
}

我试过了：

.modal-backdrop + .modal-backdrop {
    opacity : 0;
}
.modal-backdrop:nth-child(2n-1) {
    opacity : 0;
}

另外，使用js：

$(".modal").on("shown.bs.modal", function () {
    if ($(".modal-backdrop").length > 1) {
        $(".modal-backdrop").not(':first').remove();
    }
})

jQuery模态背景变得更暗

0 个答案: