Question

我在一个项目上使用Magnific Pop up，目前我在一个ASP MVC项目上作为Modal：

模态

div id="js_DeleteNewSongsPopup" class="theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup">
<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">
            <i class="fa fa-ban "></i>Reject Selected Song
        </span>
    </div>

    @* Information Body *@
    <div class="panel-body p25">
        <div class="section row">
            <div class="col-md-12 text-center">
                <h3>
                    Are you sure you want to <b class="text-danger">reject</b> the selected Songs?
                </h3>
                <p>
                    Please note, these will be <b class="text-danger">deleted</b> and no longer accessable
                </p>
            </div>
        </div>
    </div>

    @* Form Body *@
    <div class="panel-footer">
        <div class="text-center">
            <fieldset>

                    <input type="button" class="btn btn-primary js_CancelForm" value="Cancel" data-bind="click: function(){ $.magnificPopup.close(); }">
                    <input type="button" class="btn btn-danger js_DeleteNewSongsButton" value="Delete" data-bind="click: $root.submitDeleteNewSongs">
            </fieldset>
        </div>
    </div>

</div>

<button title="Close (Esc)" type="button" class="mfp-close">×</button>

的JavaScript

/* Delete New Songs Popup*/
       $(document).on("click",
           ".js_DeleteNewSongs",
           function (e) {
               e.preventDefault();
               var popup = $("#js_DeleteNewSongsPopup");

               $.magnificPopup.open({
                   removalDelay: 500, //delay removal by X to allow out-animation,
                   items: {
                       src: $(popup)
                   },
                   callbacks: {
                       beforeOpen: function (e) {
                           this.st.mainClass = 'mfp-slideUp';
                       },
                       close: function () {

                       }
                   },
                   midClick: true
                   // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
               });
               return false;
        });

任何想法都没有报告控制台错误。当标记相同时，我也不确定为什么它在另一页上工作

Answer 1

尝试：

$('body').removeClass('panel-body p25');

或者

$('body').removeClass('theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup');

基本上你需要删除＆＃34;模态＆＃34;类。

Answer 2

结束使用：

$('.js_CancelForm').on("click", function () {
           $.magnificPopup.close();
       });

现在Popup按预期关闭。

按模式上的取消时，Magnific弹出窗口不会关闭

2 个答案: