Question

我正在尝试实现下载测验的功能，并通过单击鼠标将其显示在灯箱中。我得到了所有的ajax工作，我认为正确使用Magnific-popup，但是“lightbox”丢失了。相反，我所看到的只是在黑暗背景下左对齐的文字。

我将jQuery代码缩减为复制问题所需的最小代码：

$('.els-ajax-popup').magnificPopup({ 
    type:'ajax',
    callbacks: {
        parseAjax: function (ajaxResponse) { 
            ajaxResponse.data = "<div class='wrapper'><p>this is a test</p></div>";
        }
    }
});

我的html看起来像这样

<a class = "els-ajax-popup" href="http://sandbox.somewhere.net/wp-admin/admin-ajax.php?action=els_quiz_ajax&quiz_id=3" >Quiz</a>

当前行为：点击链接后，屏幕变暗，出现“正在加载...”字样，在屏幕中央停留一秒钟并消失。然后html直接出现在黑暗的背景上，左对齐并垂直居中。另外缺少白色背景，没有办法退出。只有屏幕刷新才会恢复正常。

我仔细阅读了标有“Magnific-popup”的所有堆栈溢出问题。不知道此时我还能做些什么。

Magnific在“内联”模式下对我很有用。

$('a.open-quiz-popup').magnificPopup({ 
    type:'inline',
    midClick: true, // allow opening popup on middle mouse click.
});

在这种情况下，HTML和jscript已经在页面中。您可以查看内联版本的工作原理here。

Answer 1

我以相同的方式使用MagnificPopup它应该可以工作，看起来像你的问题与CSS有关。

查看您的信息页，也许可以尝试一下：

ajaxResponse.data = "<div id='test-popup4' class='quiz-popup'>" +
      "<div class='wrapper'><p>this is a test</p></div>" +
      "<button class='mfp-close' type='button' title='Close (Esc)'>×</button>" +
      "</div>";

应该使用您当前拥有的相同样式加载内容。

希望这有帮助。

Answer 2

希望对其他人有所帮助，我想回答标题中提出的问题。经过几个星期的努力，我可以肯定地说（从新手的角度来看）文档含糊不清，示例很少。所以我想写一些我希望我之前可以找到的东西。为此，我将如何将Slickquiz wordpress插件与Magnific-popup集成。

第一步是创建一个Slickquiz测验并验证它是否正常工作。

第二步是一个jQuery脚本，用于调用Magnific-popup，解析ajax输出并显示测验

$('.els-ajax-popup').magnificPopup({ 
    type:'ajax',
    midClick: true, // allow opening popup on middle mouse click.
    callbacks: {
        parseAjax: function (ajaxResponse) { 
            ajaxResponse.data = parseAjax( ajaxResponse.data );
        }
    }
});

function parseAjax (data) {
    var dom = $('<html>').html(data);
    var quiz_html = $('.quiz-wrapper', dom).html(); 
    var script_html = '';
    $('script', dom).each(function(){
        var script = $(this).text();
        if (script.indexOf("slickQuiz") > -1) {
            script_html = '<div style="display:none"><script>' + script + '</script></div>';
        }
    });
    return "<div class='quiz-popup'>" + quiz_html + script_html + "</div>";
}

注意：Slickquiz需要两个部分，即javascript和HTML，因此解析很复杂。因此，此代码必须找到这些部分并将它们合并为一个HTML。

第三步创建上一步中引用的CSS代码：

.quiz-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}

第四步，给用户点击一下：包含ajax网址的链接。我使用短代码来实现这一点。

[ajax-quiz quiz-id='3']Start the Quiz[/ajax-quiz]

第五步是短代码处理程序，它生成包含第二步中由Magnific-popup jQuery脚本选择的类的可点击链接，以及要传递给ajax处理程序的参数。

add_shortcode('els-ajax-popup', 'mfp_ajax');
function mfp_ajax($atts, $content) {
    extract( shortcode_atts( array('quiz_id' => '0'), $atts ) );
    $link = admin_url('admin-ajax.php?action=els_quiz_ajax&quiz_id='.$atts['quiz_id']);
    return  '<a class="els-ajax-popup" href="' . $link . '" >'.$content.'</a>';
}

第六步，编写一个发出js和html代码的ajax请求处理程序，以便在第二步中创建的Magnific Popup脚本拦截。

add_action('wp_ajax_nopriv_els_quiz_ajax', 'els_quiz_ajax');
add_action('wp_ajax_els_quiz_ajax', 'els_quiz_ajax');
function els_quiz_ajax() {
    $quiz_id = absint( $_REQUEST['quiz_id'] );
    $quiz = do_shortcode ("[slickquiz id=$quiz_id]");
    echo '<html><div class="quiz-wrapper mfp-hide">'.$quiz.'</div>';
    apply_filters ("wp_footer", ""); // output of wp_footer echoed by filters
    echo '</html>';
    die;
}

就是这样。你可以看到它正常工作here。

如何使用带有ajax的Magnific-popup显示测验

2 个答案: