时间戳

首页 > 解决方案 > jquery 函数不适用于 Dynaamic Boostrap 模态关闭

jquery - jquery 函数不适用于 Dynaamic Boostrap 模态关闭

问题描述

我在 asp.net mvc 项目中使用 Bootstrap 模式来处理动态内容。（引导版本任何 3.4.0 到 4）每当我们尝试关闭模式并单击任何用于 Sidemenu 折叠或展开的 jquery 功能时，我都必须刷新页面。此侧菜单折叠或展开也适用于 2 次打开和关闭模式。

function openModal(url, title, maxwidth, reload) {
  $('.modal-body').load(url, function() {
    $("#Modeltitle").text(title);
    $('#GenericModel').modal({
      show: true
    });
    $("#GenericModel .modal-dialog").css("max-width", maxwidth);

    if (reload === true) {
      $("#GenericModel").on("hidden.bs.modal", function() {
        window.location.reload();
      });
    }
  });
}
<!--Main Layout for Parent Page  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>    
    <link href="/Content/staffs/bootstrap.min.css" rel="stylesheet"/>
    <link href="/Content/staffs/style.css" rel="stylesheet"/>
    <link href="/Content/select2.min.css" rel="stylesheet"/>
    <link href="/Content/toastr.css" rel="stylesheet"/>
    <link href="/Content/staffs/staffsCustom.css" rel="stylesheet"/>
</head>
<body class="light purple-sidebar theme-white sidebar-mini">
    <div id="app">
        <div class="main-wrapper main-wrapper-1">
            <div class="navbar-bg"></div>
            @Html.Partial("_topNavbar")
            <!-- Main Content -->
            <div class="main-content">
                @RenderBody()
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="clearfix"></div>
    <!--Generic Modal Start  -->
    <div class="modal fade" id="GenericModel" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="Modeltitle">Modal Header</h4>
                    <button type="button" class="close" data-dismiss="modal" title="Close" aria-label="Close">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    <!--Generic Modal End  -->
     <script src="/Scripts/jquery-3.5.1.js"></script>
    <script src="/Scripts/jquery-ui-1.12.1.js"></script>
    <script src="/Scripts/staffs/bootstrap.min.js"></script>
    <script src="/Scripts/select2.full.min.js"></script>
    <script src="/Scripts/staffs/staffsCustom.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

<!-- Main Layout for Parent Page -->

<!--Call From Parent Page -->
<a href="@Url.Action("user","masters")" onclick="openModal(this.href, 'Add User', '60%', true); return false;" class="btn btn-primary" title="Add New">

<!-- Sidebar Toggle Code which not work on modal close -->
<a href="#" data-toggle="sidebar" class="nav-link nav-link-lg collapse-btn"><i class="fas fa-bars"></i></a>

<!--On Above code Bootstrap Modal Open which have another layout with all CSS and JS -->
@{
    ViewBag.Title = "User";
    Layout = "~/Areas/staffs/Views/Shared/_ModalLayout.cshtml";
}
<div class="form-row">
    <div class="col-lg-9 col-sm-6 col-xs-12">
        @using (Html.BeginForm("user", "masters", FormMethod.Post, new { id = "fmruser", @onsubmit = "return validateForm();" }))
        {
            @Html.AntiForgeryToken()
            <div class="form-row">
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.id)
                @Html.HiddenFor(model => model.pic)
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 form-group">
                    <label class="required">Email</label>
                    @Html.EditorFor(model => model.email, new { htmlAttributes = new { @type = "email", @class = "form-control", @required = "required" } })
                    @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                    <button class="btn btn-primary" type="button" onclick="SaveUsers()"></button>
                    <span class="btn btn-outline-secondary" data-dismiss="modal">Close</span>
                </div>
            </div>
        }
    </div>
</div>
@section Scripts {
    //Jquery Validation
    @Scripts.Render("~/bundles/jqueryval") 
}

关闭 Dyanmaic Boostrap 模态后。Jquery 函数在父页面上不起作用。我们每次都需要刷新才能工作。

标签： jquerytwitter-bootstrapbootstrap-modalside-menu

解决方案

推荐阅读