Как показать викторину с помощью Magnific-popup с ajax

Я пытаюсь реализовать возможность загрузки викторины и отображать ее в лайтбокс одним щелчком мыши. Я получил все работы ajax, и я думаю, что правильно использую Magnific-popup, но «Лайтбокс» отсутствует. Вместо этого все, что я вижу, это текст, оставленный на оправке, на темном фоне.Как показать викторину с помощью Magnific-popup с ajax

я уменьшил код 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 отлично работает для меня в режиме «inline».

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

В этом случае HTML и jscript уже находятся на странице. Вы можете увидеть, как работает встроенная версия here.

источник

2014-10-23 Eric Laoshi

Я использую 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>";

Это должно загрузить содержимое, применяя одни и те же стили, которые в настоящее время есть.

Надеюсь, это поможет.

источник

2014-10-30 12:48:37 LoopBit

Блестящее наблюдение! Проблема заключалась в том, что я опустил 'class = 'quiz-popup''. Я полностью забыл, что я снял этот стиль с одной из демоверсий Magnific-popup (несколько месяцев назад). –

В надежде, что это будет полезно для других, я хочу ответить на вопрос, заданный в названии. После борьбы с этим в течение пары недель я могу с уверенностью сказать, что (с точки зрения новичка) документация расплывчата, а примеров мало. Поэтому я хочу написать что-то, что я хотел бы найти раньше. С этой целью, вот как я интегрировал плагин Wordpress Slickquiz с Magnific-popup.

Шаг первый - создать викторину 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 требует двух частей, яваскрипт и 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; 
}

Всё. Вы можете увидеть, как работает here.

источник

2014-10-31 06:51:37

Как показать викторину с помощью Magnific-popup с ajax

ответ

Смежные вопросы