html 使用Magnific-Popup JS的两个选项（Django模板）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用Magnific-Popup JS的两个选项（Django模板）相关的知识，希望对你有一定的参考价值。

// http://dimsemenov.com/plugins/magnific-popup/

$(function() {
  
  /* open a modal for each control's block, it can be changed to AJAX instead */

  $('.edit-popup a').magnificPopup({
    type: 'iframe',
    closeBtnInside: true,    
    fixedContentPos: true,
    fixedBgPos: true,
    overflowY: 'auto',
    alignTop: true,
    
    callbacks: {
      open: function() {
          var magnificPopup = $.magnificPopup.instance;
      },      
      close: function () {
        window.location.reload();
      }
    }
  });

});

<!DOCTYPE html>
<html lang="en">
    <head>
    	<link href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
	<link href="{% static 'magnific-popup/dist/magnific-popup.css' %}" rel="stylesheet" media="screen">
    	
        <!-- pode ir para o final -->
        <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
        <script src="{% static 'magnific-popup/dist/jquery.magnific-popup.min.js' %}"></script>

    </head>
    <body id="top">
      ...
      <p>
        <a href="{% url '...' %}" class="btn btn-success" id="btn-link-popup"> link using pop-up</a>
      </p>
      ...
    </body>
</html>


 
{% block extrajs %}

  $("#btn-link-popup").click(function(evt) {
    var magnificPopup = $.magnificPopup.instance; 

    $.ajax({
        url: "/url/da/aplicacao/que/sera/aberta/no/popup/",
        type: "POST",
        dataType: "json",
        data: {
            'csrfmiddlewaretoken': '{{csrf_token}}',
        },
        success: function(data, textStatus, jqXHR) {
            //TODO: do something here...
        },
        error: function(data, textStatus, jqXHR) {
            //TODO
        }                    
    });

    magnificPopup.close();
    evt.preventDefault();

  });

{% endblock extrajs %}
<!DOCTYPE html>
<html lang="en">
    <head>

    	<link href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
	<link href="{% static 'magnific-popup/dist/magnific-popup.css' %}" rel="stylesheet" media="screen">
    	
        <!-- pode ir para o final -->
        <script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
        <script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'magnific-popup/dist/jquery.magnific-popup.min.js' %}"></script>
        <script src="{% static 'assets/js/script.js' %}"></script>  <!-- POP-UP CODE -->

    </head>
    <body id="top">
      ...
      <p class="edit-popup">
        <a href="{% url '...' %}" class="btn btn-success"> link using pop-up</a>
      </p>
      ...
    </body>
</html>

以上是关于html 使用Magnific-Popup JS的两个选项（Django模板）的主要内容，如果未能解决你的问题，请参考以下文章

如何让 magnific-popup 打开内联库中的选定项目？

Magnific-popup 只是指向 youtube 视频的链接，不会在弹出窗口中显示

我可以使用 magnific-popup 显示 MP4 视频吗？

magnific-popup 是不是有可拖动的选项

灯箱效果插件Magnific Popup详解

如何在模态下打开 Youtube 视频