Фундамент Zurb Reveal Modal Открыть снизу окна

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

Я пытался отредактировать функцию открытия с помощью раскрывающегося js, который находится ниже (исходный код).

Спасибо П

open : function (target, ajax_settings) {
  if (target) {
    if (typeof target.selector !== 'undefined') {
      var modal = $('#' + target.data('reveal-id'));
    } else {
      var modal = $(this.scope);

      ajax_settings = target;
    }
  } else {
    var modal = $(this.scope);
  }

  if (!modal.hasClass('open')) {
    var open_modal = $('[data-reveal].open');

    if (typeof modal.data('css-top') === 'undefined') {
      modal.data('css-top', parseInt(modal.css('top'), 10))
        .data('offset', this.cache_offset(modal));
    }

    modal.trigger('open');

    if (open_modal.length < 1) {
      this.toggle_bg();
    }

    if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
      this.hide(open_modal, this.settings.css.close);
      this.show(modal, this.settings.css.open);
    } else {
      var self = this,
          old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;

      $.extend(ajax_settings, {
        success: function (data, textStatus, jqXHR) {
          if ( $.isFunction(old_success) ) {
            old_success(data, textStatus, jqXHR);
          }

          modal.html(data);
          $(modal).foundation('section', 'reflow');

          self.hide(open_modal, self.settings.css.close);
          self.show(modal, self.settings.css.open);
        }
      });

      $.ajax(ajax_settings);
    }
  }
},

 show : function (el, css) {
  // is modal
  if (css) {
    if (el.parent('body').length === 0) {
      var placeholder = el.wrap('<div style="display: none;" />').parent();
      el.on('closed.fndtn.reveal.wrapped', function() {
        el.detach().appendTo(placeholder);
        el.unwrap().unbind('closed.fndtn.reveal.wrapped');
      });

      el.detach().appendTo('body');
    }

    if (/pop/i.test(this.settings.animation)) {
      css.top = $(window).scrollTop() - el.data('offset') + 'px';
      var end_css = {
        top: $(window).scrollTop() + el.data('css-top') + 'px',
        opacity: 1
      };

      return this.delay(function () {
        return el
          .css(css)
          .animate(end_css, this.settings.animation_speed, 'linear', function () {
            this.locked = false;
            el.trigger('opened');
          }.bind(this))
          .addClass('open');
      }.bind(this), this.settings.animation_speed / 2);
    }

    if (/fade/i.test(this.settings.animation)) {
      var end_css = {opacity: 1};

      return this.delay(function () {
        return el
          .css(css)
          .animate(end_css, this.settings.animation_speed, 'linear', function () {
            this.locked = false;
            el.trigger('opened');
          }.bind(this))
          .addClass('open');
      }.bind(this), this.settings.animation_speed / 2);
    }

    return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
  }

  // should we animate the background?
  if (/fade/i.test(this.settings.animation)) {
    return el.fadeIn(this.settings.animation_speed / 2);
  }

  return el.show();
},

javascript zurb-foundation
person Pierce Butler    schedule 07.01.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если я правильно понимаю ваш вопрос, вы можете попробовать заменить позицию Reveal absolute на позицию fixed.

У меня была проблема, когда я запускал модальное окно по ссылке в нижней части длинной страницы, но модальное окно открывалось вверх (пользователю приходилось прокручивать вверх, чтобы попасть в модальное окно).

.reveal-modal {
   position: fixed; /* <- */
}
person chrisjordanme    schedule 03.02.2014

arrow_upward
1
arrow_downward

Некоторые примечания к ответу @chrisjordanme, которые я также видел в разделе форум фонда и github.

  1. Я думаю, вы обнаружите, что эффект темного/светлого окна фона не находится позади модального окна, но все еще неуклюже расположен вверху страницы (где модальное окно было до того, как вы применили фиксированное позиционирование).

  2. Это не очень хорошо, если вы хотите использовать close_on_background_click: true, что, по моему личному мнению, вам следует делать — я ненавижу, когда веб-сайты вынуждают меня тратить все эти дополнительные усилия, чтобы переместить курсор, чтобы щелкнуть маленькую закрыть значок. Это просто плохой UX человек.

Так; в основном просто убедитесь, что вы также применяете фиксированное позиционирование к фону :)

.reveal-modal, .reveal-modal-bg {
   position: fixed;
}
person danwild    schedule 01.01.2015