javascript - 第二次打开时，模态变成黑屏

我已经编写了一个编辑模式，确实可以工作，但是当我关闭该模式并尝试再次打开它时，它就变黑了。

我的链接称为模式

@Html.ActionLink("Editar", "GetEditSv", "Sv", new { id = sv.IDServico },new{data_target = "#modal-container", data_toggle = "modal"})

我在父视图中的容器

<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">

    </div>
</div>

删除模式数据和父视图的脚本（通过互联网获取）

<script>
   $(function () {
              //when the modal is closed
              $('#modal-container').on('hidden.bs.modal', function () {
                  //remove the bs.modal data attribute from it
                  $(this).removeData('bs.modal');
                  //and empty the modal-content element
                  $('#modal-container .modal-content').empty();
              });
          });
    $('#modal-container').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var url = button.attr("href");
        var modal = $(this);

        //note that this will replace the content of modal-contant ever time the modal is opened
        modal.find('.modal-content').load(url);
    });
</script>

模态视图的一部分（单独的文件）

@model ControleIntegrado.Models.Servico


@using (Html.BeginForm("EditSv", "Sv", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Servico</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.IDServico)

        <div class="form-group">
            @Html.LabelFor(model => model.Data, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Data.Date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Data, "", new { @class = "text-danger" })
            </div>
        </div>
       <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Salvar" class="btn btn-default" />
                <input type="button" class="btn btn-default" data-dismiss="modal" value="cancelar"/>
            </div>
        </div>
    </div>
}
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

以及控制器上的动作

public ActionResult GetEditSv(int id)
    {
        using(DBControle db = new DBControle())
        {
            foreach (var item in db.Servico)
            {
                if(item.IDServico == id)
                {
                    return PartialView("GetEditSv", item);
                }
            }
        }
        return ViewBag();
    }

https://i.stack.imgur.com/2y7NP.png

最佳答案

尝试此操作，使用$('body').find('.modal-backdrop').removeClass('modal-backdrop');去除backdrop效果（深色背景）

<script>
   $(function () {
              //when the modal is closed
              $('#modal-container').on('hidden.bs.modal', function () {
                  //remove the bs.modal data attribute from it
                  $(this).removeData('bs.modal');
                  //and empty the modal-content element
                  $('#modal-container .modal-content').empty();

                  //remove backdrop
                   $('#modal-container').find('.modal-backdrop').removeClass('modal-backdrop');
              });
          });
    $('#modal-container').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var url = button.attr("href");
        var modal = $(this);

        //note that this will replace the content of modal-contant ever time the modal is opened
        modal.find('.modal-content').load(url);
    });
</script>