如何使用ajax的Magnific弹出窗口显示测验

How to display quiz using Magnific-popup with ajax

本文关键字：窗口 显示 何使用 ajax Magnific      更新时间：2023-09-26

我正在尝试实现下载测试并在灯箱中显示测试的功能，只需单击鼠标即可。我已经完成了所有ajax的工作，我认为我正确地使用了Magnific弹出窗口，但缺少"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在"内联"模式下对我来说工作得很好。

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

在这种情况下，HTML和jscript已经在页面中了。您可以在这里看到内联版本是如何工作的。

我以同样的方式使用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>";

这应该加载与您当前具有的样式相同的内容。

希望这能有所帮助。

希望它能对其他人有所帮助，我想回答标题中提出的问题。经过几周的努力，我可以放心地说（从新手的角度来看）文档很模糊，示例也很少。所以我想写一些我希望能早点找到的东西。为此，以下是我如何将Slickquiz wordpress插件与Magnific弹出窗口集成在一起。

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

第二步是一个jQuery脚本，用于调用Magnific弹出窗口，解析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 url的链接。我用了一个短代码来实现这个。

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

步骤五是生成可点击链接的短代码处理程序，该链接包含步骤二中Magnific弹出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>';
}

第六步，编写ajax请求处理程序，该处理程序发出js和html代码，这些代码将被第二步中创建的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;
}

就是这样。你可以看到它在这里工作。

相关文章：