打开一次

Question

我想知道这个问题的原因是在我打开模态弹出窗口并单击关闭按钮或取消后，下次打开时，模式将不会显示。但是当我点击保存按钮但没有关闭/取消按钮时，它工作正常。 data-dismiss功能不起作用吗？

我有关闭模式的代码：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

这也是：

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

当我点击这些按钮中的任何一个时，我点击模态的第二个按钮将不会显示。

这是我的代码： Index.cshtml      添加航空公司

调用模态：

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

Create.cshtml
@model Mondiale.Model.Airline

@{
    Layout = null;
}

<div class="modalForm">
    <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 Airline</h4>
    </div>
    @using (Html.BeginForm("Create", "Airlines", FormMethod.Post, new { @class = "ajaxForm", data_target = ".modalForm" }))
    {
        @Html.AntiForgeryToken()
        <div class="modal-body clearfix">
            <div class="row">
                <div class="col-sm-12">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="panel panel-default panel-margin">
                        <div class="panel-heading"><strong>Airline Info</strong></div>
                        <div class="panel-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    @Html.LabelFor(x => x.Name, htmlAttributes: new { @class = "col-md-2 col-sm-3 control-label" })
                                    <div class="col-md-4 col-sm-6">
                                        @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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <span class="spinner pull-left"></span>
            <button type="button" class="btn btn-default clear-cutomer-fld">Clear</button>
            <button type="submit" class="btn btn-primary">Add</button>
        </div>
    }
</div>

这是我的jquery代码：

'use strict';

(function ($) {

    /* Ajax Form Submit for Modal */
    var ajaxFormSubmit = function () {

        var $form = $(this);

        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),
            beforeSend: function () {
                $('.spinner').addClass('fa fa-spinner fa-pulse fa-2x fa-fw');
            }
        })
        .done(function (data) {
            var $target = $($form.attr('data-target'));

            if (data.status == true) {
                $('.modal').modal('hide');
                location.reload();
            } else {
                $target.replaceWith(data);
            }
        });

        return false;
    }

    /* Empty Modal Content on Hide */
    $('.modal').on('hide.bs.modal', function (e) {
        $('.modal-content').empty();
        $('.modal-dialog').removeClass('modal-lg modal-sm');
    });

    $('.Airlines')
        .on('click', '.clear-cutomer-fld', function () { // onClick clear button on modal
            alert('clear');
            $('.ajaxForm')[0].reset();
        })
        .on('click', 'a[data-toggle="modal"]', function () { // show modal
            $('.modal-dialog').addClass($(this).attr('data-wrap'));
            $('.modal-content').load($(this).attr('href'));
        })

        .on('submit', '.ajaxForm', ajaxFormSubmit); // modal ajax form submit

})(jQuery);

添加数据没有错，但只有取消/关闭按钮才有问题。