Admin panel - Use modal popup with magnific popup js library

src/Plugins/DiscountRules.Standard/Areas/Admin/Views/HasAllProducts/Configure.cshtml

@@ -45,7 +45,9 @@
         <span class="control-label" style="text-align:left" id="discountrequirement-product-names@(Model.RequirementId)"></span>
         <div class="group-btn btn-group-devided margin-top-10">
             <input type="button" id="saveHasAllProductsrequirement@(Model.RequirementId)" class="btn default" value="@Loc["Admin.Common.Save"]" />
-            <input type="submit" id="btnAddNewDiscountRequirementProduct@(Model.RequirementId)" value="@Loc["Plugins.DiscountRules.HasAllProducts.Fields.Products.AddNew"]" onclick="javascript:OpenWindow('@(Url.RouteUrl("Plugin.DiscountRules.HasAllProducts.ProductAddPopup", new { btnId = "btnRefreshDiscountRequirementProducts" + Model.RequirementId, productIdsInput = Html.IdFor(model => model.Products) }))', 800, 800, true); return false;" class="btn default" />
+            <a id="btnAddNewDiscountRequirementProduct@(Model.RequirementId)" href="@(Url.RouteUrl("Plugin.DiscountRules.HasAllProducts.ProductAddPopup", new { btnId = "btnRefreshDiscountRequirementProducts" + Model.RequirementId, productIdsInput = Html.IdFor(model => model.Products) }))" class="btn default">
+                @Loc["Plugins.DiscountRules.HasAllProducts.Fields.Products.AddNew"]
+            </a>
         </div>
         <div id="pnl-save-requirement-result@(Model.RequirementId)" style="display:none;">@Loc["admin.marketing.Discounts.Requirements.Saved"]</div>
 
@@ -54,6 +56,18 @@
         <input type="submit" id="btnRefreshDiscountRequirementProducts@(Model.RequirementId)" style="display: none" />
         <script>
                 $(document).ready(function () {
+                    $('#btnAddNewDiscountRequirementProduct@(Model.RequirementId)').magnificPopup({
+                        type: 'ajax',
+                        settings: { cache: false, async: false },
+                        callbacks: {
+                            parseAjax: function (mfpResponse) {
+                                mfpResponse.data = $('<div></div>').html(mfpResponse.data);
+                            },
+                            ajaxContentAdded: function () {
+                                $('.mfp-wrap').removeAttr('tabindex');
+                            }
+                        }
+                    });
                     $('#btnRefreshDiscountRequirementProducts@(Model.RequirementId)').click(function () {
                         //refresh product list
                         loadDiscountRequirementProductFriendlyNames@(Model.RequirementId)();

src/Plugins/DiscountRules.Standard/Areas/Admin/Views/HasAllProducts/ProductAddPopup.cshtml

@@ -1,5 +1,5 @@
 @{
-    Layout = "~/Areas/Admin/Views/Shared/_AdminPopupLayout.cshtml";
+    Layout = "";
 }
 @model DiscountRules.HasAllProducts.Models.RequirementModel.AddProductModel
 @using Grand.Domain.Common;
@@ -8,8 +8,8 @@
     //page title
     ViewBag.Title = Loc["Plugins.DiscountRules.HasAllProducts.Fields.Products.Choose"];
 }
-<form asp-controller="HasAllProducts" asp-action="ProductAddPopup" method="post">
-    
+<form id="ProductAddPopup" asp-controller="HasAllProducts" asp-action="ProductAddPopup" method="post">
+
     <div class="row">
         <div class="col-md-12">
             <div class="x_panel light form-fit">
@@ -75,7 +75,35 @@
     </div>
     <div id="products-grid"></div>
     <script>
-        $(document).ready(function () {
+            var mfp = $.magnificPopup.instance;
+            $("#ProductAddPopup").submit(function (e) {
+                e.preventDefault();
+                var form = $(this);
+                var url = form.attr('action');
+                $.ajax({
+                    type: "POST",
+                    url: url,
+                    data: form.serialize(),
+                    success: function (data) {
+                        if (data == "") {
+                            mfp.close();
+                            $('#btnRefresh').click();
+                        } else {
+                            $.magnificPopup.open({
+                                items: {
+                                    src: data,
+                                    type: 'inline'
+                                },
+                                callbacks: {
+                                    open: function () {
+                                        $('.mfp-wrap').removeAttr('tabindex');
+                                    }
+                                }
+                            });
+                        }
+                    }
+                });
+            });
             $("#products-grid").kendoGrid({
                 dataSource: {
                     type: "json",
@@ -128,17 +156,13 @@
                     template: '# if(Published) {# <i class="fa fa-check" aria-hidden="true" style="color:green"></i> #} else {# <i class="fa fa-times" aria-hidden="true" style="color:red"></i> #} #'
                 }]
             });
-        });
-    </script>
-    <script>
-        $(document).ready(function () {
+
             $('#search-products').click(function () {
                 var grid = $('#products-grid').data('kendoGrid');
                 grid.dataSource.page(1); //new search. Set page size to 1
                 //grid.dataSource.read(); we already loaded the grid above using "page" function
                 return false;
             });
-        });
 
         $("#@Html.IdFor(model => model.SearchProductName)").keydown(function (event) {
             if (event.keyCode == 13) {
@@ -162,16 +186,16 @@
 
         function selectRequiredProduct(productid) {
             try {
-                var currentValue = window.opener.document.getElementById('@(ViewBag.productIdsInput)').value;
+                var currentValue = document.getElementById('@(ViewBag.productIdsInput)').value;
                 if (currentValue) {
                     //add comma
-                    window.opener.document.getElementById('@(ViewBag.productIdsInput)').value += ', ';
+                    document.getElementById('@(ViewBag.productIdsInput)').value += ', ';
                 }
-                window.opener.document.getElementById('@(ViewBag.productIdsInput)').value += productid;
-                window.opener.document.getElementById('@(ViewBag.btnId)').click();
+                document.getElementById('@(ViewBag.productIdsInput)').value += productid;
+                document.getElementById('@(ViewBag.btnId)').click();
             }
             catch (e){}
-            window.close();
+            $.magnificPopup.instance.close();
         }
     </script>
 </form>

src/Plugins/DiscountRules.Standard/Areas/Admin/Views/HasOneProduct/Configure.cshtml

@@ -45,7 +45,9 @@
         <label class="control-label" style="text-align:left" id="discountrequirement-product-names@(Model.RequirementId)"></label>
         <div class="group-btn btn-group-devided margin-top-10">
             <input type="button" id="saveHasOneProductrequirement@(Model.RequirementId)" class="btn default" value="@Loc["Admin.Common.Save"]" />
-            <input type="submit" id="btnAddNewDiscountRequirementProduct@(Model.RequirementId)" value="@Loc["Plugins.DiscountRules.HasOneProduct.Fields.Products.AddNew"]" onclick="javascript:OpenWindow('@(Url.RouteUrl("Plugin.DiscountRules.HasOneProduct.ProductAddPopup", new { btnId = "btnRefreshDiscountRequirementProducts" + Model.RequirementId, productIdsInput = Html.IdFor(model => model.Products) }))', 800, 800, true); return false;" class="btn default" />
+            <a id="btnAddNewDiscountRequirementProduct@(Model.RequirementId)" href="@(Url.RouteUrl("Plugin.DiscountRules.HasOneProduct.ProductAddPopup", new { btnId = "btnRefreshDiscountRequirementProducts" + Model.RequirementId, productIdsInput = Html.IdFor(model => model.Products) }))" class="btn default">
+                @Loc["Plugins.DiscountRules.HasOneProduct.Fields.Products.AddNew"]
+            </a>
         </div>
 
         <div id="pnl-save-requirement-result@(Model.RequirementId)" style="display:none;">@Loc["admin.marketing.Discounts.Requirements.Saved"]</div>
@@ -56,16 +58,28 @@
 
     <script>
         $(document).ready(function () {
+            $('#btnAddNewDiscountRequirementProduct@(Model.RequirementId)').magnificPopup({
+                        type: 'ajax',
+                        settings: { cache: false, async: false },
+                        callbacks: {
+                            parseAjax: function (mfpResponse) {
+                                mfpResponse.data = $('<div></div>').html(mfpResponse.data);
+                            },
+                            ajaxContentAdded: function () {
+                                $('.mfp-wrap').removeAttr('tabindex');
+                            }
+                        }
+                    });
             $('#btnRefreshDiscountRequirementProducts@(Model.RequirementId)').click(function () {
                 //refresh product list
                 loadDiscountRequirementProductFriendlyNames@(Model.RequirementId)();
 
                 //return false to don't reload a page
                 return false;
             });
-        
+
             loadDiscountRequirementProductFriendlyNames@(Model.RequirementId)();
-        
+
             $('#@Html.IdFor(model => model.Products)')
                 .data('timeout', null)
                 .keyup(function () {

src/Plugins/DiscountRules.Standard/Areas/Admin/Views/HasOneProduct/ProductAddPopup.cshtml

@@ -1,5 +1,5 @@
 @{
-    Layout = "~/Areas/Admin/Views/Shared/_AdminPopupLayout.cshtml";
+    Layout = "";
 }
 @model DiscountRules.HasOneProduct.Models.RequirementModel.AddProductModel
 @using Grand.Domain.Common;
@@ -8,7 +8,7 @@
     //page title
     ViewBag.Title = Loc["Plugins.DiscountRules.HasOneProduct.Fields.Products.Choose"];
 }
-<form asp-controller="HasOneProduct" asp-action="ProductAddPopup" method="post">
+<form id="ProductAddPopup" asp-controller="HasOneProduct" asp-action="ProductAddPopup" method="post">
 
     <div class="row">
         <div class="col-md-12">
@@ -75,7 +75,35 @@
     </div>
     <div id="products-grid"></div>
     <script>
-        $(document).ready(function () {
+        var mfp = $.magnificPopup.instance;
+        $("#ProductAddPopup").submit(function (e) {
+            e.preventDefault();
+            var form = $(this);
+            var url = form.attr('action');
+            $.ajax({
+                type: "POST",
+                url: url,
+                data: form.serialize(),
+                success: function (data) {
+                    if (data == "") {
+                        mfp.close();
+                        $('#btnRefresh').click();
+                    } else {
+                        $.magnificPopup.open({
+                            items: {
+                                src: data,
+                                type: 'inline'
+                            },
+                            callbacks: {
+                                open: function () {
+                                    $('.mfp-wrap').removeAttr('tabindex');
+                                }
+                            }
+                        });
+                    }
+                }
+            });
+        });
             $("#products-grid").kendoGrid({
                 dataSource: {
                     transport: {
@@ -127,17 +155,13 @@
                     template: '# if(Published) {# <i class="fa fa-check" aria-hidden="true" style="color:green"></i> #} else {# <i class="fa fa-times" aria-hidden="true" style="color:red"></i> #} #'
                 }]
             });
-        });
-    </script>
-    <script>
-        $(document).ready(function () {
+
             $('#search-products').click(function () {
                 var grid = $('#products-grid').data('kendoGrid');
                 grid.dataSource.page(1); //new search. Set page size to 1
                 //grid.dataSource.read(); we already loaded the grid above using "page" function
                 return false;
             });
-        });
 
         $("#@Html.IdFor(model => model.SearchProductName)").keydown(function (event) {
             if (event.keyCode == 13) {
@@ -161,16 +185,16 @@
 
         function selectRequiredProduct(productid) {
             try {
-                var currentValue = window.opener.document.getElementById('@(ViewBag.productIdsInput)').value;
+                var currentValue = document.getElementById('@(ViewBag.productIdsInput)').value;
                 if (currentValue) {
                     //add comma
-                    window.opener.document.getElementById('@(ViewBag.productIdsInput)').value += ', ';
+                    document.getElementById('@(ViewBag.productIdsInput)').value += ', ';
                 }
-                window.opener.document.getElementById('@(ViewBag.productIdsInput)').value += productid;
-                window.opener.document.getElementById('@(ViewBag.btnId)').click();
+                document.getElementById('@(ViewBag.productIdsInput)').value += productid;
+                document.getElementById('@(ViewBag.btnId)').click();
             }
             catch (e){}
-            window.close();
+            $.magnificPopup.instance.close();
         }
     </script>
 </form>

src/Plugins/Shipping.ByWeight/Areas/Admin/Views/ShippingByWeight/AddPopup.cshtml

@@ -1,9 +1,9 @@
 @{
-    Layout = "_AdminPopupLayout";
+    Layout = "";
 }
 @model ShippingByWeightModel
 @using Shipping.ByWeight.Models;
-<form asp-controller="ShippingByWeight" asp-action="AddPopup" method="post"
+<form id="AddPopup" asp-controller="ShippingByWeight" asp-action="AddPopup" method="post"
       asp-route-ShippingByWeightId="@Context.Request.Query["ShippingByWeightId"]"
     asp-route-btnId="@Context.Request.Query["btnId"]"
     asp-route-formId="@Context.Request.Query["formId"]">
@@ -29,4 +29,21 @@
             </div>
         </div>
     </div>
+    <script>
+        var mfp = $.magnificPopup.instance;
+        $("#AddPopup").submit(function (e) {
+            e.preventDefault();
+            var form = $(this);
+            var url = form.attr('action');
+            $.ajax({
+                type: "POST",
+                url: url,
+                data: form.serialize(),
+                success: function (data) {
+                    mfp.close();
+                    $('#btnRefresh').click();
+                }
+            });
+        });
+    </script>
 </form>

src/Plugins/Shipping.ByWeight/Areas/Admin/Views/ShippingByWeight/Configure.cshtml

@@ -22,13 +22,41 @@
             <div id="shipping-byweight-grid"></div>
         </div>
         <div class="panel-footer">
-            <input type="submit" id="btnAddNewOption" value="@Loc["Plugins.Shipping.ByWeight.AddRecord"]" onclick="javascript:OpenWindow('@(addNewUrl)', 800, 550, true); return false;" class="btn default" />
+            <a id="btnAddNewOption" href="@(addNewUrl)" class="btn default">
+                @Loc["Plugins.Shipping.ByWeight.AddRecord"]
+            </a>
             <input type="submit" id="btnRefresh" style="display: none" />
         </div>
     </div>
     <script>
         $(document).ready(function () {
+            $('#btnAddNewOption').magnificPopup({
+                type: 'ajax',
+                settings: { cache: false, async: false },
+                callbacks: {
+                    parseAjax: function (mfpResponse) {
+                        mfpResponse.data = $('<div></div>').html(mfpResponse.data);
+                    },
+                    ajaxContentAdded: function () {
+                        $('.mfp-wrap').removeAttr('tabindex');
+                    }
+                }
+            });
             $("#shipping-byweight-grid").kendoGrid({
+                dataBound: function() {
+                    $('.editpopup').magnificPopup({
+                        type: 'ajax',
+                        settings: { cache: false, async: false },
+                        callbacks: {
+                            parseAjax: function (mfpResponse) {
+                                mfpResponse.data = $('<div></div>').html(mfpResponse.data);
+                            },
+                            ajaxContentAdded: function () {
+                                $('.mfp-wrap').removeAttr('tabindex');
+                            }
+                        }
+                    });
+                },
                 dataSource: {
                     transport: {
                         read: {
@@ -109,7 +137,7 @@
                     field: "Id",
                     title: "@Loc["Admin.Common.Edit"]",
                     width: 100,
-                    template: "<input type='submit' value='@Loc["Admin.Common.Edit"]' onclick=\"javascript:OpenWindow('@Url.Action("EditPopup","ShippingByWeight")?id=#=Id#&btnId=btnRefresh&formId=shipping-byweight-form', 800, 400, true); return false;\" class='k-button k-button-icontext' />"
+                    template: "<a href=\"@Url.Action("EditPopup","ShippingByWeight")?id=#=Id#&btnId=btnRefresh&formId=shipping-byweight-form\" class='k-button editpopup k-button-icontext'>@Loc["Admin.Common.Edit"]</a>"
                 },  {
                     command: { name: "destroy", text: "@Loc["Admin.Common.Delete"]" },
                     title: "@Loc["Admin.Common.Delete"]",

src/Plugins/Shipping.ByWeight/Areas/Admin/Views/ShippingByWeight/EditPopup.cshtml

@@ -3,11 +3,11 @@
 }
 @model ShippingByWeightModel
 @using Shipping.ByWeight.Models;
-<form asp-controller="ShippingByWeight" asp-action="EditPopup" method="post"
+<form id="EditPopup" asp-controller="ShippingByWeight" asp-action="EditPopup" method="post"
       asp-route-ShippingByWeightId="@Context.Request.Query["ShippingByWeightId"]"
       asp-route-btnId="@Context.Request.Query["btnId"]"
       asp-route-formId="@Context.Request.Query["formId"]">
-    
+
     <div class="row">
         <div class="col-md-12">
             <div class="x_panel light form-fit">
@@ -28,4 +28,21 @@
             </div>
         </div>
     </div>
+    <script>
+        var mfp = $.magnificPopup.instance;
+        $("#EditPopup").submit(function (e) {
+            e.preventDefault();
+            var form = $(this);
+            var url = form.attr('action');
+            $.ajax({
+                type: "POST",
+                url: url,
+                data: form.serialize(),
+                success: function (data) {
+                    mfp.close();
+                    $('#btnRefresh').click();
+                }
+            });
+        });
+    </script>
 </form>