0

我有一个非常典型的 Boostrap 模态：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create New Customer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mb-1 pb-1 ">
                <form asp-page-handler="CustomerModalPartial"  >
                    <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                    <input name="Id" type="hidden" value="@ViewData.Model.Id" />
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="Name" class="bmd-label-floating" for="input-name">Company Name</label>
                        <input asp-for="Name" class="form-control" type="text" id="input-name" />
                        <span asp-validation-for="Name" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="ContactName" class="bmd-label-floating" for="input-contactName">Customer Name</label>
                        <input asp-for="ContactName" class="form-control" type="text" id="input-contactName" />
                        <span asp-validation-for="ContactName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="ContactEmail" class="bmd-label-floating" for="input-contactEmail">Customer Email</label>
                        <input asp-for="ContactEmail" class="form-control" type="email" id="input-contactEmail" />
                        <span asp-validation-for="ContactEmail" class="text-danger"></span>
                    </div>
                </form>
                <div class="modal-footer mr-0 pr-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-save="modal" id="submitButton">Create</button>
                </div>
            </div>
        </div>
    </div>
</div>

我加载partial通过

 $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data("url");
        $.get(url).done(function(data) {
            placeholderElement.html(data);
            placeholderElement.find(".modal").modal("show");
        });
    });

使用按钮/占位符设置，如下所示：

<div style="position: fixed;bottom: 20px;right: 20px;">
    <button type="button" class="btn btn-primary bmd-btn-fab" data-toggle="ajax-modal" data-url="@Url.Page("Index", "CustomerModalPartial")">+</button>
</div>

<form method="get">
    <div class="form-group">
        <label for="search" class="bmd-label-floating">Search</label>
        <input type="text" class="form-control" id="search" name="currentFilter" value="@Model.CurrentFilter">
        <span class="bmd-help">Search against the customer name, ...</span>
    </div>
    <input type="submit" style="display: none"/>
</form>

<!-- Modal placeholder -->
<div id="modal-placeholder"></div>

但是，我的标签不会浮动：

在此处输入图像描述

我已经确认我确实正确加载了 MD Bootstrap，因为显示模式的页面有一个浮动搜索：

在此处输入图像描述

为什么我的模态没有浮动标签？

作为旁注，我还注意到我没有从材料设计引导程序中获得诸如复选框之类的东西。我觉得我错过了什么。想法？

4

0 回答 0