Częste problemy innych użytkowników

Zapytaj w grupie na Facebooku

Porozmawiaj z nami na live-chat

Nie udało ci się znaleźć rozwiązania problemu?

Częste problemy innych użytkowników

Zapytaj w grupie na Facebooku

Porozmawiaj z nami na live-chat

Nie udało ci się znaleźć rozwiązania problemu?

Popup to okienka, które mają za zadanie wyświetlić treść, która przed aktywacją popupa jest niewidoczna. Okienko wyświetla się nad pozostałą treścią strony, zakrywając ją najczęściej przyciemnionym tłem. Bez problemu dodasz taki popup do swojej strony internetowej stworzonej w WebWave kreatorze stron www bez kodowania.

 

 

  1. Dodaj nową grupę na liście warstw.
     

  2. Dodaj do strony elementy, które mają pokazać się po aktywacji popupa. Może to być jeden lub kilka dowolnych elementów.
     

  3. Ułóż elementy tak, jak chcesz, żeby wyświetlały po aktywacji popupa.
     

  4. Dodaj wszystkie elementy popupa do wcześniej stworzonej grupy i ukryj ją.
     

  5. Dodaj grupę razem z jej zawartością do szablonu.
     

  6. Grupa oraz jej zawartość powinny tworzyć listę widoczną poniżej.
     

  7. Dodaj do strony przycisk, który będzie aktywował popup oraz element html.
     

  8. W elemencie html podmień domyślny kod na:
     

    <script>
       var __konfiguracjaPopupow__ = [
            {
                triggerElementId: '#1',
                popupGroupId: '#2'
            },
        ];
        

        (function () {

            var config = __konfiguracjaPopupow__;

            var userPopups = [];
            var popupBackground = $('<div id="custom_popupBackground__"></div>');
            popupBackground.css({
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0,0,0,0.7',
                zIndex: 100,
                position: 'absolute',
                display: 'none'
            });
            var __customUserPopup__ = function (config) {
                this.triggerElementId = config.triggerElementId;
                this.popupGroupId = config.popupGroupId;
                this._initDomObjects();
                this._initEvents();
            };
            __customUserPopup__.prototype._initDomObjects = function () {
                this.$triggerElement = $('#' + this.triggerElementId);
                this.$popupGroup = $('#' + this.popupGroupId);
                this.$popupElements = $('[groupid="' + this.popupGroupId + '"]');
                this.$popup = this.$popupGroup.add(this.$popupElements);
            };
            __customUserPopup__.prototype._initEvents = function () {
                this.$triggerElement.on('click', this.showPopup.bind(this))
            };
            __customUserPopup__.prototype.showPopup = function () {
                this.$popup.fadeIn();
                groupService.updateGroups();
                this.bindClosePopupEvents();
                $(document.body).append(popupBackground);
                popupBackground.fadeIn();
                this.$popup.css('z-index', 1000);
                this.changeElementsPositionToMiddle();
            };
            __customUserPopup__.prototype.bindClosePopupEvents = function () {
                var that = this;
                $(document).one('keydown', function (e) {
                    if (e.keyCode === 27) {
                        that.closePopup()
                    }
                });
                setTimeout(function () {
                    $(document).on('click.closePopup', function (e) {
                        var test = that.$popup.find($(e.target)).length === 0;
                        if (test) {
                            that.closePopup();
                            $(document).off('click.closePopup')
                        }
                    });
                }, 200)
            };

            __customUserPopup__.prototype.closePopup = function () {
                this.$popup.fadeOut();
                popupBackground.fadeOut(function () {
                    popupBackground.remove()
                });
            };

            __customUserPopup__.prototype.changeElementsPositionToMiddle = function () {
                var popupOffset = this.$popup.offset();
                this.$popupElements.each(function () {
                    var element = $(this);
                    var elementOffset = element.offset();
                    element.css({
                        left: elementOffset.left - popupOffset.left,
                        top: elementOffset.top - popupOffset.top
                    });
                    element.removeAttr('groupid')
                });
                this.$popupGroup.append(this.$popupElements);
                this.$popupGroup.css({
                    position: 'fixed',
                    top: '50%',
                    left: '50%',
                    transform: "translate(-50%, -50%)"
                });
                this.$popupGroup.removeAttr('id');
                this.$popupGroup.attr('type', '').attr('data-ww_rwd', '').attr('class', '')
            };
            $(document).ready(function () {
                for (var i = 0; i < config.length; i++) {
                    userPopups.push(new __customUserPopup__(config[i]));
                }
            });
        })()
    </script>

      

  9. Opublikuj stronę.
     

  10. Na opublikowanej stronie znajdź ID przycisku, który będzie aktywował popup oraz ID grupy, w której są elementy popupa. Jeśli nie wiesz taj to zrobić przeczytaj ten poradnik.
     

  11. Skonfiguruj wcześniej dodany kod, zmieniając #1 na ID przycisku oraz #2 na ID grupy.
     

  12. Ponownie opublikuj stronę. 

Popup aktywowany przyciskiem

© Copyright 2017 by WebWave   |   Created by Adrian Bizewski

WebWave CMS - logo