我刚刚创建了按钮，单击后会弹出一个模式，每个按钮都有一个显示不同练习 gif 的模式。然而，模态框太小，导致用户无法看到整个 gif，迫使他们向下滚动。我想删除滚动条并使模态更大，以便用户可以看到整个 gif。任何帮助都会很棒，这是我的代码笔https://codepen.io/anon/pen/gPwved https://codepen.io/anon/pen/gPwved
HTML
<div id="modal1" class="modal">
<div class="modal-content">
<h4></h4>
<p></p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
jQuery-我创建了 6 个具有不同 id 的点击函数，这是其中之一的示例，如果您需要完整代码，请参阅我的 codepen
$("#chest").on("click", function() {
$("h4").html("Bench Press");
$("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>");
$("#modal1").openModal("show");
});
是的，您的需求可以轻松设置。
要增加模态的宽度，只需调整 .modal 类的宽度
.modal { width: 75% !important } /* increase the width as per you desire */
要增加模态的高度，请增加 .modal 类的 max-height，如下所示
.modal { width: 75% !important ; max-height: 100% !important } /* increase the width and height! */
要防止模式滚动，只需将属性 Overflow-y:hidden 添加到模式类中，如下所示
.modal { width: 75% !important ; max-height: 100% !important ; overflow-y: hidden !important ;} /* increase the width, height and prevent vertical scroll! However, i don't recommend this, its better to turn on vertical scrolling. */
为了获得更多的可定制性，您应该将其作为自定义 css 放入单独的 css 表（如 mycustomstyles.css）中，并将其加载为标头中的最后一个样式表。
这是代码笔 -https://codepen.io/anon/pen/LGxeOa https://codepen.io/anon/pen/LGxeOa
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
