第二次打开时,模态会变成黑屏

时间:2017-05-16 20:56:26

标签: javascript jquery asp.net

我编写了一个编辑模式,确实有效,但是当我关闭模态并尝试再次打开它时,它就会变暗。

我的链接调用模态

@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

1 个答案:

答案 0 :(得分:0)

试试这个,使用 jQuery(function () { var $els = $('div[id^=slide_]'), i = 0, len = $els.length; $els.slice(1).hide(); setInterval(function () { $els.eq(i).fadeOut(function () { i = (i + 1) % len $els.eq(i).fadeIn(); }) }, 20000) }); 删除$('body').find('.modal-backdrop').removeClass('modal-backdrop');效果(深色背景)

backdrop