Как вызвать Morphing modal overlay через собственную функцию?

Question

Привет ребят) у меня получилось сделать только то, что внизу, но хотелось бы переделать это под этот вариант буду благодарен за помощь.

<a href="/dle-rules-page.html" class="btn-info" onclick="staticpage('dle-rules-page'); return false;">вызов</a>

function staticpage(a) {
  $.post(dle_root + "engine/ajax/staticpage.php", {
    user_hash: dle_login_hash,
    pages: a
  }, function (a) {
    $.fancybox.open('<div class="message"><h2>Информация</h2><p>' + a + '</p></div>');
  })
}

прошу прощения, если не так поставил вопрос.

Answer 1

Не самое изящное, но тем не менее решение:

$(function() {
  // Инициализируем плагин fancymorph и переназначаем событие onclick
  $(".morphing").fancyMorph().off('click').on('click', function() {
    // Временный контент fancybox, можно заменить спиннером
    $("#morphing-content").html('...');
    // Запускаем fancymorph
    $(this).data('morphing').start();

    // Получаем данные AJAX запросом
    $.get('https://old-smoke-4646.getsandbox.com/hello', function(html) {
      $("#morphing-content").html('<div class="message"><h2>Информация</h2><p>' + html + '</p></div>');
    });
    return false;
  });
});

.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
    transition: color .3s .2s, width .2s 0s;
    white-space: nowrap;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8125rem;
    padding: 0.375rem 1rem;
    background-color: #ff5268;
    border-color: #ff5268;
    color: #fff;
    text-decoration: none;
}
.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
<script src="https://fancyapps.com/fancybox/3/examples.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<link href="https://fancyapps.com/fancybox/3/examples.css" rel="stylesheet"/>

<a href="/dle-rules-page.html" class="btn morphing" data-src="#morphing-content">Вызов</a>
<div id="morphing-content" class="hidden"></div>

БЛОГ НА HUSL

Как вызвать Morphing modal overlay через собственную функцию?

Ответы (1 шт):