如何定义“materializecss”模态“之前”（beforeload）功能答案

【问题标题】：How can define "materializecss" modal "before" (beforeload) functionality如何定义“materializecss”模态“之前”（beforeload）功能
【发布时间】：2015-08-12 08:08:59
【问题描述】：

我使用了materializecss 框架，但卡在了模态功能中。

我已经使用以下代码为图像制作了弹出模式：

HTML：

<div class="media-insert"> <a href="#img2" class="modal-trigger"><img src="images/slide1.jpg" class="img-responsive" /></a>
  <div class="modal" id="img2">
    <div class="modal-content"> <img src="images/slide1.jpg" class="img-responsive" /> <a href="javascript:void(0);" class="modal-action modal-close"><span class="mdi-navigation-close"></span></a> </div>
  </div>
</div>

JS：

$('.modal-trigger').leanModal();

CSS：

.media-insert .modal {
    width: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    max-height: 100%;
    overflow: visible;
}

但问题是，图像和模态（包装器）在center 中都没有对齐。而且模态包装器也不像fancybox popup那样响应

我已尝试使用此代码进行回调：

$('.modal-trigger').leanModal({
    ready: function () {
        var modelImgW = $('.modal-content img').innerWidth();
        var modelImgH = $('.modal-content img').innerHeight();
        $('.media-insert .model').css({
            'height': modelImgH + 'px'
        });
        $('.media-insert .model').css({
            'width': modelImgW + 'px'
        });

    }
});

没有，请帮忙。

提前致谢！

【问题讨论】：

标签： javascript jquery css material-design

【解决方案1】：

对不起我之前的回答，我以为你根本没有让模态工作......

您使用了一些影响模式的响应性和宽度的 CSS 规则，并且为了使模式中的内容居中对齐，您只需要另一个规则。只需修改 CSS，替换图像并添加 btn 类 - 您可以运行 sn-p 并单击“整页”以查看它的工作原理。

$('.modal-trigger').leanModal();

.media-insert .modal {
  max-height: 100%;
  overflow: visible;
}
.media-insert .modal .modal-content {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<div class="media-insert">
  <a href="#img2" class="btn modal-trigger">
    <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" class="img-responsive" />
  </a>
  <div class="modal" id="img2">
    <div class="modal-content">
      <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" class="img-responsive" /> <a href="javascript:void(0);" class="modal-action modal-close"><span class="mdi-navigation-close"></span></a> 
    </div>
  </div>
</div>

Their documentation of button-triggered modals 可以进一步帮助您。

【讨论】：