Question

我有使用jquery的bootstrap模式的这个实现。但是，当我检查元素时，有些部分没有显示。这是代码。

<div class="col-md-9 filter-header">
    <a href='@Url.Action("CreateRole", "Admin")' class="btn btn-warning pull-right" data-toggle="modal" data-target=".modal" data-wrap="modal-lg"><i class="fa fa-plus fa-fws"></i> Add Role</a>
</div>

下面，我将这些数据放到哪里。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
    <div class="modal-dialog">
        <div class="modal-content">
             <!--Content Inside Here--> 
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

我有jquery实现来添加数据。

$('.Roles')
     .on('click', 'a[data-toggle="modal"]', function () { // show modal
            $('.modal-content').load($(this).attr('href'));
      })
     .on('submit', '.ajaxForm', ajaxFormSubmit);

以下是调用控制器后放入模态内容的代码

@model C2T.Models.RoleViewModel

@{
    ViewBag.Title = "Create Role";
    Layout = null;
}

<div class="modalForm ">

    @using (Html.BeginForm("CreateRole", "Admin", FormMethod.Post, new { @class = "ajaxForm", data_target = ".modalForm" }))
    {
    @Html.AntiForgeryToken()
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><i class="fa fa-user-plus fa-fw"></i> New Role</h4>
    </div>
    <div class="modal-body">
        <div class="form-horizontal">
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-sm-3" })
                <div class="col-sm-9">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control input-sm" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-sm-3" })
                <div class="col-sm-9">
                    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control input-sm" } })
                    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <span class="spinner pull-left"></span>
        <input type="button" value="Cancel" class="btn btn-default" data-dismiss="modal" />
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
    }
</div>

角色是身体类，我确信当我点击模态时会触发jquery代码。出于某种原因，它确实显示数据和模态，但UI不起作用。这就是它的样子。

我也有检查元素，这是结果，'模态对话'和'模态内容'类没有包括在内。

有没有人知道如何解决这个问题？提前谢谢。

Answer 1

按照div的层次结构构建bootstrap建议的模态，以便正确应用样式。目前，您有modalForm包含模态内容。在modal-body中移动自定义代码，以便正确应用样式。在下面的代码段中，将自定义代码插入到modal-body div中。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="C2T Modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                 <!-- INSERT CUSTOM CODE HERE -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

模态UI无法正常工作

1 个答案: