티스토리 뷰

WEB 웹/JAVASCRIPT

Magnific Popup

KIMSG 2017. 12. 1. 11:01
: gem 'magnific-popup-rails', '~> 1.1.0’



closeBtnInside


1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
 
// Example: 2 Dynamically created
$('button').magnificPopup({
  items: {
      src: '<div class="white-popup">Dynamically created popup</div>',
      type: 'inline'
  },
  closeBtnInside: true
});





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE HTML>
<html>
    <script src="jquery.magnific-popup.min.js"></script>
    <link href="magnific-popup.css"  rel="stylesheet" type="text/css">
    <style>
        .white-popup {
            position: relative;
            background: #FFF;
            padding: 20px;
            width:auto;
            max-width: 500px;
            margin: 20px auto;
        }
    </style>
    <body>
        <a class="test_popup_link"  id="target">Open popup</a>
 
        <script src="mustache/mustache.min.js"></script>
        <script id="template" type="x-tmpl-mustache">
            <div class="white-popup">Hello {{ name }}!</div>
        </script>
            <script>
                var template = $('#template').html();
 
                function loadUser(name) {
                    return Mustache.render(template, {name: name});
                }
 
                (function () {
                    Mustache.parse(template);   // optional, speeds up future uses
 
                    $('#target').on('click', function() {
                        var rendered = loadUser('TEST');
                        $.magnificPopup.open({
                            items: {
                                src: rendered,
                                type: 'inline',
                            },
                            callbacks: {
                                beforeOpen: function() {
                                    console.log('Start of popup initialization');       //팝업시작 전
                                },
                                elementParse: function(rendered) {
                                    // Function will fire for each target element
                                    // "item.el" is a target DOM element (if present)
                                    // "item.src" is a source that you may modify
 
//                                    console.log('Parsing content. Item object that is being parsed:', rendered);
                                },
                                change: function() {
//                                    console.log('Content changed');
//                                    console.log(this.content); // Direct reference to your popup element
                                },
                                resize: function() {
//                                    console.log('Popup resized');
                                    // resize event triggers only when height is changed or layout forced
                                },
                                open: function() {
//                                    console.log('Popup is opened');
                                },
                                beforeClose: function() {
                                    // Callback available since v0.9.0
//                                    alert('Popup close has been initiated');
                                },
                                close: function() {
//                                    alert('Popup removal initiated (after removalDelay timer finished)');
                                },
                                afterClose: function() {
//                                    alert('Popup is completely closed');
                                },
                                markupParse: function(template, values, item) {             //
                                    // Triggers each time when content of popup changes
                                     console.log('Parsing:', template, values, item);
                                },
                                updateStatus: function(data) {
                                    console.log('Status changed', data);
                                    // "data" is an object that has two properties:
                                    // "data.status" - current status type, can be "loading", "error", "ready"
                                    // "data.text" - text that will be displayed (e.g. "Loading...")
                                    // you may modify this properties to change current status or its text dynamically
                                },
                                imageLoadComplete: function() {
                                    // fires when image in current popup finished loading
                                    // avaiable since v0.9.0
                                    console.log('Image loaded');
                                },
 
 
                                // Only for ajax popup type
                                parseAjax: function(mfpResponse) {
                                    // mfpResponse.data is a "data" object from ajax "success" callback
                                    // for simple HTML file, it will be just String
                                    // You may modify it to change contents of the popup
                                    // For example, to show just #some-element:
                                    // mfpResponse.data = $(mfpResponse.data).find('#some-element');
 
                                    // mfpResponse.data must be a String or a DOM (jQuery) element
 
                                    console.log('Ajax content loaded:', mfpResponse);
                                },
                                ajaxContentAdded: function() {
                                    // Ajax content is loaded and appended to DOM
                                    console.log(this.content);
                                }
                            }
                        }, 0);
                    });
                })();
 
            </script>
    </body>
 
</html>

하지만, 중첩 팝업이 되지 않고 새로운 팝업을 띄우면 아까의 팝업을 가지고 자신의 팝업으로 만든다.


저작자표시 비영리 동일조건

'WEB 웹 > JAVASCRIPT' 카테고리의 다른 글

카카오톡 항상 떠있는 버튼 구현 (floating button)  (0) 2021.03.14
크롬 클립보드 복사  (0) 2021.02.28
gem - mustache  (0) 2017.11.30
ECMAScript6  (0) 2017.11.24
Document (javascript30 - 13)  (0) 2017.11.23
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함